入力を変更したときにClassClass（）またはremoveClassを追加する方法

Question

このようにしてdosentが動作します。私は入力pass2を取得しようとしているときに、入力パスと値を比較する値を変更します。それは誘発していません。

jqueryの

$("#pass2").change(function() { 
if (($("#pass2").val()) != ($("#pass").val())) { 
    $(".pass2").addClass("has-error"); 
} else { 
    $(".pass2").removeClass("has-error"); 
} 
}); 

HTML

Pass: 
<input id="pass" type="text" name="pass" value="" /> 
Pass again: 
<span class="pass2"><input id="pass2" type="text" name="pass2" value="" /></span> 

Answer 1

あなたがここに

jsfiddleそれはkeyupイベントに正常に動作します、あなたが直面しているどのようなエラー

Answer 2

changeイベントのみ起動ので直ちにトリガする代わりinput又はkeyupイベントを使用してテキスト入力からフォーカスを失ったとき。

$("#pass2").on('input', function() { 
    if (($("#pass2").val()) != ($("#pass").val())) { 
     $(".pass2").addClass("has-error"); 
    } else { 
     $(".pass2").removeClass("has-error"); 
    } 
}); 

Answer 3

onblurイベントで確認パスワードを確認できます。これを実行するには、 idのonblurイベントの関数をバインドする必要があります。もちろん、addClass('has-error')に電話すると、has-successクラスを削除する必要があります。そうしないと、何度も試してみると、期待した結果が表示されません。
N.B：さらに、両方のフィールドが空でないかのように、両方のフィールドが空であるかどうかを確認する必要があります。

function checkPass(){ 
 
if($("#pass2").val()!='' && $("#pass").val()!=''){ 
 
    if (($("#pass2").val()) != ($("#pass").val())) { 
 
      $(".pass2").addClass("has-error"); 
 
      $(".pass2").addClass("has-success"); 
 
      console.log("has-error");// for testing purpose we print it 
 
     } else { 
 
      $(".pass2").removeClass("has-error"); 
 
      $(".pass2").addClass("has-succes"); 
 
      console.log("has-success"); // for testing purpose we print it 
 
     } 
 
    }else{ 
 
      console.log("password field can not be empty"); 
 
      // here you can show alert or error msg as you want. 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
Pass: 
 
<input id="pass" type="text" name="pass" value="" /> 
 
Pass again: 
 
<span class="pass2"><input id="pass2" onblur="checkPass()" type="text" name="pass2" value="" /></span>

もjsFiddleを参照してください。