jQuery验证equalTo不能与Grails一起使用

Question

I'm using jQuery Validate plugin in my Grails application , Here is the code from the GSP for the validation:

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

All the validations are working fine except equalTo validation, although the two password fields have the same value I get a password doesn't match error.

Here are the Password fields :

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

Is there anything I missed that may cause this error?

Answer 1

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

You will see this condition if there is no element matching #password .

equalTo: "#password"

Your #password selector is looking for an element that contains id="password" . If you cannot add an id attribute to this element, you can try the following, which will match by name ...

equalTo: "[name='password']"

DEMO: jsfiddle.net/68a9fkgt/