2016-07-25 12 views
-1

以下のブートストラップと同じバリデーターをマイページに使用しました。私はパスワードを捜索して疲れました&パスワードを確認する大文字と一致する&小文字。しかし、私は期待された結果を得ていませんでした。助けてください。Boostrap同一バリデーター - pwd&pwdを確認すると大文字と小文字が一致します

http://formvalidation.io/validators/identical/ 

入力:

パスワード - サンプル

確認パスワード - サンプル

私は入力が大文字または小文字にある場合は、同一のバリデータは、パスワードが一致し(サンプル)を受け入れることを望みます。以下は

私のコードです:ブートストラップバリでのその後

<form method="POST" action="" accept-charset="UTF-8" id="createAccount" class="fv-form fv-form-bootstrap" novalidate="novalidate">    

       <div class="form-group"> 
        <div class="row"> 
         <div class="col-sm-4 text-right"> 
           <label for="password" class="control-label">Password *:</label> 
         </div> 
         <div class="col-sm-6 has-feedback"> 
           <input class="form-control" maxlength="10" name="password" type="password" id="password"> 
         </div> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="row"> 
         <div class="col-sm-4 text-right"> 
           <label for="confirPassword" class="control-label">Confirm Password *:</label> 
         </div> 
         <div class="col-sm-6 has-feedback"> 
           <input class="form-control" maxlength="10" name="confirmPassword" type="password"> 
           <div id="error-id"></div> 
         </div> 
        </div> 
       </div> 
       <div class="form-group text-center"> 
        <div class="row"> 
         <div class="col-sm-12 text-center"> 
           <button class="btn btn-success" type="submit" style="width:100px">Submit</button> 
         </div> 
        </div> 
       </div> 
     </form> 

<script type="text/javascript"> 
$(document).ready(function() { 

$('#createAccount') 
    .formValidation({ 
     framework: 'bootstrap', 
     icon: { 
      valid: 'glyphicon glyphicon-ok icon-success', 
      invalid: 'glyphicon glyphicon-remove icon-fail', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      password: { 
       row: '.col-sm-6', 
       validators: { 
        notEmpty: { 
         message: 'Password is required' 
        }, 
          identical: { 
            field: 'confirmPassword', 
            message: 'The password and its confirm are not the same' 
          } 
       } 
      }, 
      confirmPassword: { 
       row: '.col-sm-6', 
       validators: { 
        notEmpty: { 
         message: 'Confirm password is required' 
        }, 
          identical: { 
            field: 'password', 
            message: 'The password and its confirm are not the same' 
          }        
       } 
      },     
     } 
    }); 
    }); 
    </script> 

答えて

0
var password = document.getElementById("password") 
, confirm_password = document.getElementById("confirm_password"); 

function validatePassword(){ 
if(password.value != confirm_password.value) { 
confirm_password.setCustomValidity("Passwords Don't Match"); 
} else { 
confirm_password.setCustomValidity(''); 
} 
} 

password.onchange = validatePassword; 
confirm_password.onkeyup = validatePassword; 

Demo

0

あなたは大文字とし、それらを比較するために、両方の文字列を変更することによって、これを達成することができ、次のようなもの:

if (pw1.toUpperCase() === pw2.toUpperCase()) { 

// same values... 
} 
else { 
// different values... 
} 
: