動的に入力

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) 
    }) 
}) 

私はこのフレームワークを使い始めるよにCSSクラスを追加する方法。

パスワードと確認パスワードが等しくない場合は、入力に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>

Answer 2

$("input[type=password]").keyup(function(){ 
 
    var pass=$('#i2').val(); 
 
    var cpass=$('#ci2').val(); 
 
    if(pass!=cpass){ 
 
    $('input[type=password]').addClass('has-error'); 
 
    }else{ 
 
    $('input[type=password]').removeClass('has-error'); 
 
    } 
 
});

.has-error{ 
 
    border: 1px solid #ff0000 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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="ci2"> 
 
</div> 
 

 
<button type="button" class="btn btn-default" id="button">Click</button>

Answer 3

あなたはを使用することができますイベント、jQueryではtoggleClass(className, state)を使用することができます。

'has-error'クラスは対応するdivでトグルする必要があります。

$(function() { 
 
    $('input[name="password_confirmation"]').on('blur', function (e) { 
 
    var pwd = $('input[name="password"]').val(); 
 
    var confirmPwd = $(this).val(); 
 
    $(this).closest('div').toggleClass('has-error', pwd != confirmPwd); 
 
    }) 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.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="i1"> 
 
</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>