jquery - css クラスを入力に動的に追加する方法

Question

<div class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Password</label>
    <input confirm_password type="password" name="password" class="form-control" id="i2">
</div>

<div id="confirm_pwd_item" class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Confirm Password</label>
    <input confirm_password type="password" name="password_confirmation" class="form-control" id="i2">
</div>

私のやり方

$('input[confirm_password]').each(function(){
    $(this).bind('input propertychange',function(){
        setTimeout(function(){
            if($('input[name=password]').val() !== $('input[name=password_confirmation]').val()){
                $("#confirm_pwd_item").addClass('has-error');
            }
            else{
                $("#confirm_pwd_item").removeClass('has-error');
            }
        },100)
    })
})

私はこのフレームワークを使い始めたばかりです。

has-errorパスワードと確認パスワードが一致しない場合、入力に追加したい。

しかし、これは良い方法ではありません。

setTimeout 関数でない場合:

Answer 1

jQuery(document).ready(function($){
  $('input[name="password_confirmation"]').change(function(){
    var prevPass = $('input[name="password"]').val();
    if($(this).val() != prevPass){
      $(this).addClass('has-error');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Password</label>
    <input confirm_password type="password" name="password" class="form-control" id="i2">
</div>

<div id="confirm_pwd_item" class="form-group label-floating is-empty">
    <label for="i2" class="control-label">Confirm Password</label>
    <input confirm_password type="password" name="password_confirmation" class="form-control" id="i2">
</div>