jquery validate minlength rule is not working

Question

I have a form with a password field. The password has to be at least 8 characters long.

<form action="/account/register" method="post" id="form-register">
<div class="input-row">
    <input name="data[User][password]" type="password" id="FUserPassword" class="required" placeholder="Password">
</div>

</form>

$("#form-register").validate({
        rules: {
            FUserPassword : {
                minlength: 8
            }
        }
    });

It applies the "required" rule, but it just ignores the "minlength" rule.

What am I doing wrong? I'm using the same code (the JS part) on other pages and it works as expected.

Answer 1

Validate looks for the name of the input field, not the id. From the documentation for the rules option:

Key/value pairs defining custom rules. Key is the name of an element (or a group of checkboxes/radio buttons)

With that in mind, you should use something like this:

$("#form-register").validate({
    rules: {
        'data[User][password]': {
            minlength: 8
        }
    }
});

For input names with special characters, be sure to quote the object key.

Example: http://jsfiddle.net/kqczf/4/