CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Aryan G
Aryan G

Reputation: 1301

jquery confirm password validation

I am using jquery for form validation. Rest is well except the confirm password field. Even when the same password is typed, the Please enter the same password. is not removed.

My script is:

  <script type="text/javascript">
    $(document).ready(function() {
      $("#form1").validate({
        rules: {
          password: { 
                required: true, minlength: 5
          }, 
          c_password: { 
                required: true, equalTo: "#password", minlength: 5
          }, 
        email: {
          required: true, email: true
          },
        phone: {
          required: true, number: true, minlength: 7
          },
        url: {
          url: true
        },
        description: {
          required: true
        },
        gender: {
             required: true
          }
        },
        messages: {
         description: "Please enter a short description.",
         gender: "Please select your gender."

        }
      });
    });
     -->
  </script>

And inside the form tag:

<div class="form-row"><span class="label">Password</span><input type="password" name="password" class="required" id="password" /></div>

<div class="form-row"><span class="label">Confirm Password</span><input type="password" name="c_password" id="c_password" /></div>

Any suggestion? Would be much thankful for the help.

Upvotes: 27

Views: 63207

Answers (7)

ranjan kumar
ranjan kumar

Reputation: 9

if($("#newpassword").val()!== ($("#conformpassword").val())){
    $('#newpasswordId').html('<font color="red">Your password does not match</font>');
    $("#newpassword").val('');
    $("#conformpassword").val('');
    $('#newpassword').css("border", "#FF0000 solid 1px")
    $('#conformpassword').css("border", "#FF0000 solid 1px")
    $("#newpassword").focus();

    return false;
}

Upvotes: 0

Thiwanka
Thiwanka

Reputation: 91

<input type="password" id="password" class="nomal required error" value="" name="cpassword">

<input type="password" equalto="#password" class="nomal required error" value="" name="cpassword">

Upvotes: 7

sgimeno
sgimeno

Reputation: 1893

I came across some issues when using camelCase id's for the password inputs. I finnally got it working with different 'name' and 'id'.

<input type="password" id="pass" placeholder="New password" name="newPassword">
<input type="password" id="pass2" placeholder="New password" name="repeatNewPassword">
<input type="email" id="inputNewEmail" name="newEmail" placeholder="New email">
<input type="email" id="repeatNewEmail" name="repeatNewEmail" placeholder="New email>

Then in the JS:

rules: {
            newPassword: {
                minlength: 6
            },
            repeatNewPassword: {
                minlength: 6,
                equalTo: "#pass"
            },
            newEmail: { email: true},
            repeatNewEmail: {email: true, equalTo: '#inputNewEmail'},
}

So refer to the input field by its 'name' but define equalTo deppendency using 'id'. I'm not sure about the camelCase issue, for the email inputs it worked, but exactly same nomenclature with password inputs didn't work, according to my experience

Upvotes: 1

Pat
Pat

Reputation: 11

Be sure that no other input with tag id='password' in that same page.

Upvotes: 1

MatuDuke
MatuDuke

Reputation: 5008

Your fields doesn't have the ID property. In jQuery the "#password" selector means "the object that has an id property with value 'password'"

Your code should look like this:

<input type="password" name="password" id="password" class="required"/>

Upvotes: 18

Craig
Craig

Reputation: 21

rules: {

isn't closed. Put another } after:

messages: {
   description: "Please enter a short description.",
   gender: "Please select yor gender."
}

This is as well as the answer about the element ID's.

Upvotes: 2

Dalen
Dalen

Reputation: 8996

Be sure that your password's input text has id 'password'

Upvotes: 2

Related Questions