Xác nhận mật khẩu bằng jQuery Xác thực

Question

Tôi đang cố gắng sử dụng plugin xác thực jQuery để xác nhận mục nhập mật khẩu của mình.

Tuy nhiên, tôi không muốn nó là trường bắt buộc.

Chỉ cần NẾU người dùng muốn thay đổi mật khẩu, họ sẽ cần xác nhận mật khẩu.

Nếu không, cả hai trường sẽ không được xác thực.

jQuery('.validatedForm').validate({ 
    rules: { 
     password: { 
      required: true, 
      minlength: 5 
     }, 
     password_confirm: { 
      required: true, 
      minlength: 5, 
      equalTo: "#password" 
     } 
    } 
}); 

Điều này hoạt động hoàn hảo, nhưng một lần nữa, cả hai trường đều được yêu cầu.

Tôi muốn có tùy chọn này, trong trường hợp ai đó chỉ muốn thay đổi ví dụ email hoặc tên người dùng của họ và chỉ để lại mật khẩu.

Answer 1

Xóa quy tắc required: true.

Demo: Fiddle

jQuery('.validatedForm').validate({ 
      rules : { 
       password : { 
        minlength : 5 
       }, 
       password_confirm : { 
        minlength : 5, 
        equalTo : "#password" 
       } 
      } 

Answer 2

Chỉ cần một kêu vang nhanh chóng tại đây để hy vọng giúp đỡ người khác ... Đặc biệt với các phiên bản mới hơn (vì đây là 2 tuổi) ...

Thay vì phải một số trường tĩnh được xác định trong JS, bạn cũng có thể sử dụng thuộc tính data-rule-*. Bạn có thể sử dụng các quy tắc tích hợp cũng như các quy tắc tùy chỉnh.

Xem http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods để biết các quy tắc được tích hợp sẵn.

Ví dụ:

<p><label>Email: <input type="text" name="email" id="email" data-rule-email="true" required></label></p> 
<p><label>Confirm Email: <input type="text" name="email" id="email_confirm" data-rule-email="true" data-rule-equalTo="#email" required></label></p> 

Lưu ý data-rule-* thuộc tính.

Answer 3

Nó hoạt động nếu giá trị id và giá trị tên là khác nhau:

<input type="password" class="form-control"name="password" id="mainpassword"> 
password: {  required: true,  } , 
cpassword: {required: true, equalTo: '#mainpassword' }, 

Answer 4

jQuery('.validatedForm').validate({ 
     rules : { 
      password : { 
       minlength : 5 
      }, 
      password_confirm : { 
       minlength : 5, 
       equalTo : '[name="password"]' 
      } 
     } 

Nói chung, bạn sẽ không sử dụng id="password" như thế này. Vì vậy, bạn có thể sử dụng [name="password"] thay vì "#password"

Answer 5

Tôi đang thực hiện nó trong Chơi Framework và đối với tôi nó làm việc như thế này:

1) Chú ý rằng tôi sử dụng dữ liệu quy tắc equalTo trong thẻ đầu vào cho id inputPassword1. Phần mã của userform trong phương thức của tôi:

<div class="form-group"> 
    <label for="pass1">@Messages("authentication.password")</label> 
    <input class="form-control required" id="inputPassword1" placeholder="@Messages("authentication.password")" type="password" name="password" maxlength=10 minlength=5> 
</div> 
<div class="form-group"> 
    <label for="pass2">@Messages("authentication.password2")</label> 
    <input class="form-control required" data-rule-equalTo="#inputPassword1" id="inputPassword2" placeholder="@Messages("authentication.password")" type="password" name="password2"> 
</div> 

2) Kể từ khi tôi sử dụng validator trong một phương thức

$(document).on("click", ".createUserModal", function() { 
     $(this).find('#userform').validate({ 
      rules: { 
       firstName: "required", 
       lastName: "required", 
       nationalId: { 
        required: true, 
        digits:true 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       optradio: "required", 
       password :{ 
        required: true, 
        minlength: 5 
       }, 
       password2: { 
        required: true 
       } 
      }, 
      highlight: function (element) { 
       $(element).parent().addClass('error') 
      }, 
      unhighlight: function (element) { 
       $(element).parent().removeClass('error') 
      }, 
      onsubmit: true 
     }); 

    }); 

Hy vọng nó sẽ giúp người :).