Проверка подлинности JQuery Подтверждение пароля Проблема

Question

Я пытаюсь выполнить проверку с помощью jquery validator. Впервые все прекрасно работает.

Но со второго раза, без изменения какой-либо вещи в поле пароля, если я перейти в раздел подтверждения пароля, пароль в идеале будет показывать ошибку, но в то же время подтверждения пароль также показывает ошибку, "confirm password not matches to password."

Confirm пароль должен показывать ошибку только после ввода неправильного пароля, который не совпадает с паролем.

Есть ли решение для этой проблемы или мне нужно написать собственный собственный метод, расширяющий метод проверки.

Вот это то, что я пробовал:

$(document).ready(function(){ 
 
$("#cp").validate(validateChangePswrdForm("changePasswordForm")); 
 
}); 
 
var validateChangePswrdForm = function() { 
 
    var that = this; 
 
    return { 
 
     rules: { 
 
      password: { 
 
       required: true, 
 
       minlength: 8, 
 
      }, 
 
      confirmpassword: { 
 
       equalTo: "#password" 
 
      } 
 
     }, 
 
     messages: { 
 
      password: { 
 
       required: "password is required", 
 
       minlength: 5 
 
      }, 
 
      confirmpassword: { 
 
       required: "confirm password is required", 
 
       minlength: 5 
 
      } 
 
     }, 
 
     submitHandler: function(fId, evt) { 
 
      var serForm = $(fId).serialize(); 
 
      changepassword(fId, evt) 
 
     } 
 
    } 
 
}; 
 

 
var changepassword = function(){ 
 
alert('Validated'); 
 
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div id="cp"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-lg-8 col-md-8 col-sm-7"> 
 
       <form method="post" role="form" autocomplete="off" name="changePasswordForm" id="changePasswordForm"> 
 
        <div class="alert alert-danger changepassword-error hidden"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label for="password">password</label> 
 
         <input type="password" class="form-control" name="password" id="password" placeholder="password"> 
 
        </div> 
 
        <div class="form-group reg-form col-sm-7 padLeft"> 
 
         <label for="confirmpassword">Confirm Password</label> 
 
         <input type="password" class="form-control noradius" name="confirmpassword" id="confirmpassword" placeholder="Confirm Password"> 
 
        </div> 
 
        <div class="btn-toolbar"> 
 
         <button type="submit" class="btn">Submit</button> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Ваш код:

$("#cp").validate(.... 

Впервые каждая вещь работает отлично

Невозможно, чтобы он мог работать вообще. Если вы присоедините метод .validate() к <div> (id="cp"), ничего не произойдет. Чтобы инициализировать плагин, вы можете привязать этот метод только к элементу <form>.

Кроме того, вы не можете передать два аргумента в функцию submitHandler. Он был указан только для обработки одного аргумента, который представляет объект form.

И значения в объекте messages могут содержать только строки, представляющие пользовательские сообщения об ошибках. У вас есть сообщения, определенные для правил, которые никогда не были объявлены, а также значений, которые не являются строками.

Это работает:

$(document).ready(function() { 

    $("#changePasswordForm").validate({ 
     rules: { 
      password: { 
       required: true, 
       minlength: 8, 
      }, 
      confirmpassword: { 
       equalTo: "#password" 
      } 
     }, 
     messages: { 
      password: { 
       required: "password is required", 
       // minlength: 5 // <- this must be a string! 
      }, 
      confirmpassword: { 
       required: "confirm password is required", 
       // minlength: 5 // <- this must be a string! 
      } 
     }, 
     submitHandler: function(fId) { 
      var serForm = $(fId).serialize(); 
      changepassword() 
     } 
    }); 

}); 

var changepassword = function() { 
    alert('Validated'); 
}; 

DEMO: http://jsfiddle.net/eqouszsw/