JavaScriptだけでなくdivを変更するキーアップ

Question

2つのテキストフィールドが一致するかどうかを確認するコードがあります。これはうまく動作するキーアップを使用していますが、結果に応じてdivを表示または非表示にしたいと思います。私が持っているのは、divCheckPasswordMatchを変更するコードですか？

$(function() { 
    $("#password2").keyup(function() { 
     var password = $("#password1").val(); 
     $("#divCheckPasswordMatch").html(password == $(this).val() ? "Passwords match." : "Passwords do not match!"); 
    }); 
}); 

Answer 1

私の推測では、あなたは2 <div>がshow()とhide()を使用して異なるメッセージを表示したいですが、私はよ：

だから私は

$('#match').hide(); 
$('#nomatch').show(); 

JSコードにそれを希望していますわからないので、私は両方をしました。さてあなたは、あなたがこれを行うことができますしたいものを以下

$('#match').hide(); 
 
$('#nomatch').hide(); 
 

 
$("#password2").keyup(function() { 
 
    var password = $("#password1").val(); 
 
    
 
    
 
    if ($(this).val() === password) { 
 
    $('#divCheckPasswordMatch').html('Passwords match'); 
 
    $('#match').show(); 
 
    $('#nomatch').hide(); 
 
    } else { 
 
    $('#divCheckPasswordMatch').html('Passwords do not match'); 
 
    $('#match').hide(); 
 
    $('#nomatch').show(); 
 
} 
 
    
 
    
 
});

<form action="/action_page.php"> 
 
    First input: <input id="password1" type="text" name="fname"><br> 
 
    Second input: <input id="password2" type="text" name="lname"><br> 
 
</form> 
 
<div id="divCheckPasswordMatch"></div> 
 
<div id="match">Match</div> 
 
<div id="nomatch">No Match</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

。 HTML

<input id="password1"> 
<input id="password2"> 
<spam id="divCheckPasswordMatch"></spam> 

JS

$(function() { 
    $("#password2").keyup(function() { 
     var password = $("#password1").val(); 
     var password2 = $("#password2").val(); 
     if(password!== null && password2!== null){ 
      if(password == password2) { 
      $('#divCheckPasswordMatch').show(); 
      $("#divCheckPasswordMatch").html("Passwords match.") 
      } 
      else { 
      $('#divCheckPasswordMatch').hide(); 
      $("#divCheckPasswordMatch").html("Passwords do not match!") 
      } 
     } 
    }); 
}); 

しかし、あなたはまた、パスワード1があまりにも変更された場合、予期する必要があることを覚えておいてください。

Answer 3

ここでは動作例を示します。学習目的のために、私は非常にjQueryの代わりに純粋なJavaScriptを使用することをお勧めします。 jQueryに書き直すのは簡単です。あなたが望むなら、私はあなたのためにそれをすることができます。

ぼかしイベントがありません。追加しました。コードは反復可能ではありませんが、それでも改善できます。検証のために1つの関数を使用しています。

var field1 = document.getElementById('password1'); 
 
var field2 = document.getElementById('password2'); 
 
var result = document.getElementById('divCheckPasswordMatch'); 
 
    
 
function validateInputs() { 
 
    // If any of fields is empty then quit 
 
    if (field1.value === '' || field2.value === '') { 
 
    return; 
 
    } 
 
    
 
    if (field1.value === field2.value) { 
 
    result.innerHTML = ''; 
 
    // optional hide it, clearing text gives almost the same effect, up to you 
 
    // result.style.display = 'none'; 
 
    } else { 
 
    result.innerHTML = 'Passwords don\'t match'; 
 
    // optional show it 
 
    //result.style.display = 'block'; 
 
    } 
 
} 
 
    
 
document.getElementById('password1').addEventListener('keyup', validateInputs); 
 
document.getElementById('password2').addEventListener('keyup', validateInputs); 
 
    
 
document.getElementById('password1').addEventListener('blur', validateInputs); 
 
document.getElementById('password2').addEventListener('blur', validateInputs);

<input type="text" id="password1"> 
 
<input type="text" id="password2"> 
 
<div id="divCheckPasswordMatch"></div>