Confirm Password with jQuery Validate

Question

I'm trying to use jQuery validate plugin to confirm my password entry.

However, I don't want it to be a required field.

Just IF a user wants to change the password, they would need to confirm it.

If not, both fields shouldn't be validated.

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

This is working perfectly, but again, both fields are required.

I would like to have this optional, in case someone just wants to change for instance their email or username and leave the password alone.

yeah, i tried that, but then the confirmation doesn't work anymore. i mean the password_confirm field IS required IF the password field isn't empty — ldrocks, Feb 05 '13 at 08:56
oh, then I think you may need a custom validator: http://docs.jquery.com/Plugins/Validation/Validator/addMethod — Hoàng Long, Feb 05 '13 at 08:58

score 163 · Accepted Answer · edited Dec 08 '21 at 21:30

163

Remove the required: true rule.

Demo: Fiddle

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

edited Dec 08 '21 at 21:30

Adam Davis

359
5
16

answered Feb 05 '13 at 09:04

Arun P Johny

376,738
64
519
520

5

doesn't work. then it always says "please enter the same value again" even though both fields are empty – ldrocks Feb 05 '13 at 09:08
please post the code. include jquery library version you are using in your sample. Cause here not work this solution! – devasia2112 Jan 25 '14 at 16:31
@ratnakar it should work. ... edit the attached fiddle to recreate the issue – Arun P Johny Aug 10 '14 at 09:51
No its not working Arun ,Please review my code once "user[password]": { minlength : 8 }, "user[password_confirmation]": { minlength : 8, equalTo: "#user_password" } – ratnakar Aug 10 '14 at 10:14
but we don't need a minlength for the second password I think, because however that equalTo rule will validate this case. Am I right? – Vignesh May 15 '15 at 15:31

score 36 · Answer 2 · answered Aug 10 '15 at 17:20

36

Just a quick chime in here to hopefully help others... Especially with the newer version (since this is 2 years old)...

Instead of having some static fields defined in JS, you can also use the data-rule-* attributes. You can use built-in rules as well as custom rules.

See http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods for built-in rules.

Example:

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

Note the data-rule-* attributes.

answered Aug 10 '15 at 17:20

Rob W

9,001
1
27
49

2

This is better and easy answer than the first one,i like it, +1. – Haritsinh Gohil Nov 27 '18 at 05:00
2

you can use data-msg-equalTo to change the default message – Leo Jul 29 '19 at 13:56
this is not working at all for me. Do I need to import some library or anything? – Muhammad Zubair Apr 15 '22 at 10:44

score 8 · Answer 3 · edited Sep 24 '15 at 07:51

8

It works if id value and name value are different:

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

edited Sep 24 '15 at 07:51

arghtype

4,156
11
43
57

answered Sep 24 '15 at 07:12

Krishna Kumar

81
1
2

score 7 · Answer 4 · edited Jan 17 '18 at 04:29

7

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

In general, you will not use id="password" like this. So, you can use [name="password"] instead of "#password"

edited Jan 17 '18 at 04:29

Siddharth

9,153
15
80
142

answered May 11 '16 at 14:36

PhonPanom

367
5
7

score 3 · Answer 5 · answered Oct 26 '16 at 07:12

I'm implementing it in Play Framework and for me it worked like this:

1) Notice that I used data-rule-equalTo in input tag for the id inputPassword1. The code section of userform in my Modal:

<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)Since I used validator within a Modal

$(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
       });

   });

Hope it helps someone :).

Liking the highlight method :) – Tyler Rafferty Mar 04 '21 at 04:22 — Tyler Rafferty, Mar 04 '21 at 04:22

score 1 · Answer 6 · edited Mar 20 '21 at 07:26

<script>
   
     $(document).ready(function(){            
   
     });

     function login() {
        
         var password = $("#psw").val()
         var password1 = $("#psw1").val()
         var pswlen = password.length;
         if (pswlen < 8) {
             alert('minmum  8 characters needed')
         }
         else {

            if (password == password1) {
                 alert('continue');
                 window.location.replace("http://stackoverflow.com");
             }
             else {
                 alert('failed');
             }

         }

     }
    
</script>

Confirm Password with jQuery Validate

6 Answers6

Linked

Related