Jquery Password and confirm password validation not working Properly

Question

I'm trying to validate new password and confirm new password. even i entered same password also it was showing an error like both password must be same. please help me where i did wrong. Below is my html and jquery code.

<form role="form" id="clientresetpassword" name="clientresetpassword" action="<?php echo site_url('Home/client_password_reset'); ?>" method="post" style="padding: 10px;">
  <div class="row">
     <?php echo validation_errors(); ?>
  </div>
  <div class="form-group">
    <label>Current Password <span class="mandatory"> *</span></label>
    <input type="password" name="curpas" class="form-control" value="<?php echo set_value('curpas'); ?>" placeholder="Enetr Your Current password" required>
  </div>
  <div class="form-group">
    <label>New Password <span class="mandatory"> *</span></label>
    <input type="text" name="newpass" class="form-control" placeholder="Enter Your New Password" value="" required>
  </div>
  <div class="form-group">
    <label>Confirm New Password <span class="mandatory"> *</span></label>
    <input type="password" name="cnfnewpass" class="form-control" placeholder="Confirm New Password" value="" required>
  </div>
  <div class="form-group">
    <input type="password" class="btn btn-primary" name="reset_password" value="Reset Password">
  </div>
</form>

(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#clientresetpassword").validate({
                rules: {
                        curpas: {
                            required: true, 
                            minlength : 5,
                            maxlength : 15
                        },
                        newpass:{
                            required: true,
                            minlength: 5,
                            maxlength: 15
                        },
                        cnfnewpass: {
                            required: true,
                            minlength: 5,
                            maxlength: 15,
                            equalTo: "#newpass"
                        },
                     },
                messages: {
                        curpas: {
                            required: "Please enter Password",  
                            minlength: "Password length must be min. of 5 characters long",
                            maxlength: "Password length must not Exceed 15 characters"           
                        },
                        newpass:{
                            required: "Please enter New Password",  
                            minlength: "New Password length must be min. of 5 characters long",
                            maxlength: "New Password length must not Exceed 15 characters"
                        },
                        cnfnewpass: {
                            required: "Please enter Confirm New Password",
                            minlength: "Confirm New Password length must be min. of 5 characters long",
                            maxlength: "Confirm Password length must not Exceed 15 characters",
                            equalTo: "New Password and Confirm New Password must be same"
                        },
                    },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

Answer 1

Here is the problem:

equalTo: "#newpass"  // referring it by ID

but no id is provided to:

<input type="text" name="newpass" class="form-control" placeholder="Enter Your New Password" value="" required>

Provide id attribute to it.

Answer 2

You have to set id for a newpassword field eg

<input id="newpass" type="text" name="newpass" class="form-control" placeholder="Enter Your New Password" value="" required>

Because you are using a id selector in jQuery validation ie equalTo: "#newpass"