Confirm password using jquery rules not working

Question

I need to get the same password in cpassword. But here although the passwords match it gives error that the password do not match. When I remove the rule of equalTo the methods works fine.

So I think the problem is with ,cpassword'

rules: {
    password: {
      required: true,
      minlength: 8,
      remote: {
        url: baseURL + "member/checkPassword1",
        type: "post",
        data: {
          action: function() {
            return "checkPassword1";
          }
        }
      }
    },
    cpassword: {
      required: true,
      equalTo: "#password"
    }
  },
  messages: {
    password: {
      required: "Please enter the password!",
      minlength: "Password should contain at least 8 character!"
    },
    cpassword: {
      required: "Please confirm the password!",
      equalTo: "Confirm password doesn't match the Password"
    }
  },

view

<div class="form-group">
    <label class="headlabel"><?=$this->lang->line("Password");?><strong>*</strong></label>
    <input class="formtext form-control" type="password" name="password" id="password" value="<?php echo set_value('password'); ?>" onkeypress="removeerror('password')" placeholder=" <?=$this->lang->line("Enter_your_passwrd");?> ">
    <span class="glyphicon glyphicon-remove right errorcross" id="password_cross" style=""></span>
    <label class="errorlabel" id="password_error"><?php echo form_error('password'); ?></label>
</div>
<div class="form-group">
    <label class="headlabel"><?=$this->lang->line("Confirm_password");?><strong>*</strong></label>
    <input class="formtext form-control" type="password" name="cpassword" id="cpassword1" value="<?php echo set_value('cpassword'); ?>" onkeypress="removeerror('cpassword')" placeholder=" <?=$this->lang->line("Retype_your_passsword");?> ">
    <span class="glyphicon glyphicon-remove right errorcross" id="cpassword_cross" style=""></span>
    <label class="errorlabel" id="cpassword_error"><?php echo form_error('cpassword'); ?></label>
</div>

Does anyone have any idea on this? How can I correct it?

Answer 1

in your HTML for cpassword input element add data-rule-equalto='#password' property and have a check