jQuery Validation equalTo 不能与 Grails 一起使用答案

【问题标题】：jQuery Validation equalTo not working with GrailsjQuery Validation equalTo 不能与 Grails 一起使用
【发布时间】：2016-09-17 16:43:57
【问题描述】：

我在我的 Grails 应用程序中使用jQuery Validate plugin，以下是来自 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 验证之外，所有验证都正常工作，尽管两个密码字段具有相同的值，但我收到了password doesn't match 错误。

这里是密码字段：

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

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

【问题讨论】：

这将有助于查看实际的 RENDERED HTML，然后我们可以验证 name="password" 字段是否包含 id="password" 属性。

标签： jquery grails jquery-validate

【解决方案1】：

...虽然两个密码字段具有相同的值，但我得到了 "password doesn't match" 错误。

如果没有匹配 #password 的元素，您将看到这种情况。

equalTo: "#password"

您的#password 选择器正在寻找包含id="password" 的元素。如果您无法为该元素添加id 属性，您可以尝试以下操作，将匹配name...

equalTo: "[name='password']"

演示：jsfiddle.net/68a9fkgt/

【讨论】：