Jquery密码和确认密码验证无法正常工作

时间:2017-02-03 06:00:14

标签: javascript php jquery

我尝试验证新密码并确认新密码。即使我输入相同的密码也显示错误,因为密码必须相同。请帮我,我做错了。下面是我的html和jquery代码。

HTML表格

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

Jquery验证

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

2 个答案:

答案 0 :(得分:0)

问题在于:

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

但没有提供ID:

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

为其提供id属性。

答案 1 :(得分:0)

您必须为newpassword字段设置ID e.g

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

因为您在jQuery验证中使用了id选择器,即equalTo: "#newpass"