jQuery 验证 equalTo 不适用于 Grails

Question

我正在使用jQuery Validate plugin在我的 Grails 应用程序中，以下是来自 GSP 的验证代码:

 <script type="text/javascript">

    $(document).ready(function() {
        $('.save').attr('disabled', true);
        jQuery.validator.addMethod("noSpace", function(value, element,e) { 

        return value.indexOf(" ") < 0 && value != ""; 
          }, "${message(code:'sherif.jqueryValidation.nospaces')}");


    $('#myForm').validate({

        errorElement: "label",
        errorClass:'error',
        success: function() {
         $('.save').attr('disabled', false);
         },
        rules :
            {
            username:{required : true,noSpace:true},
            password :{required : true,noSpace:true},
            confirmPassword:{required : true,noSpace:true,equalTo:"#password"},
            contactNumber: { required : true, number:true},
            email:{required:true , email:true}
            }
    ,
        messages : {
            username:{required :"${message(code:'sherif.jqueryValidation.required')}"},
            password : {required :"${message(code:'sherif.jqueryValidation.required')}"},
            email:{required :"${message(code:'sherif.jqueryValidation.required')}" , email:"${message(code:'sherif.jqueryValidation.invalidemail')}"},
            confirmPassword: {required :"${message(code:'sherif.jqueryValidation.required')}" , equalTo:"${message(code:'sherif.jqueryValidation.passwordmatch')}"},
            contactNumber: { required : "${message(code:'sherif.jqueryValidation.required')}", number:"${message(code:'sherif.jqueryValidation.numberonly')}"}
    }

    });
});
</script> 

除了equalTo验证之外，所有验证都工作正常，尽管两个密码字段具有相同的值，但我收到密码不匹配错误。

以下是密码字段:

 <div class="row form-group">

    <div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'password', 'error')} required">
    <div class="col-sm-2 "><label for="password">
        <g:message code="users.password.label" default="Password" />
        <span class="required-indicator">*</span>
    </label>
    </div>
    <div class="col-sm-10"> <g:passwordField style = "width:40%;"  class="form-control input" name="password" required="" value="${usersInstance?.password}"/>
    </div>
    </div>
</div>

<div class="row form-group">
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'confirmPassword', 'error')} required">
    <div class="col-sm-3 "><label for="confirmPassword">
        <g:message code="users.confirmPassword.label" default="confirm Password" />
        <span class="required-indicator">*</span>
    </label>
    </div>
<div class="col-sm-9">  <g:passwordField style = "width:40%;"  class="form-control input" name="confirmPassword" required="" value="${usersInstance?.confirmPassword}"/>
</div>
</div>
</div>

我错过了什么可能会导致此错误吗？

Answer 1

...although the two password fields have the same value I get a "password doesn't match" error.

如果没有元素匹配#password，您将看到此条件。

equalTo: "#password"

您的#password 选择器正在查找包含id="password" 的元素。如果您无法向此元素添加 id 属性，您可以尝试以下操作，它将按 name 进行匹配...

equalTo: "[name='password']"

演示:jsfiddle.net/68a9fkgt/