Question

Not sure what I’m doing wrong. I’m using the jQuery Validation plugin. This is my jQuery code:

$('#form-login').validate({
    onsubmit: true,
    onfocusout: false,
    errorClass: 'invalid',
    wrapper: 'li',
    errorLabelContainer: '#login-error-list ul',
    errorContainer: '#login-error-list',
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find('label[for=' + element.id + ']')
            .addClass(errorClass);
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find('label[for=' + element.id + ']')
            .removeClass(errorClass);
    },
    rules: {
        username: 'required',
        password: 'required'
    },
    messages: {
        username: 'Please enter your username.',
        password: 'Please enter your password.'
    }
});

I followed the API Documentation very closely while writing this. However, no matter what input is entered (whether it’s none, or anything valid), it still throws an error as if the username and/or password were never entered in. You can see for yourself on this login page.

Anyone know what the problem could be?

P.S.: I should add the HTML code that generates the form and error container:

<p>Already have an account with us? Then log in!</p>
<form action="login.php" method="post" id="form-login">
<input type="hidden" name="success_page" value="" />
<div class="group">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" title="Username" maxlength="20" min="6" max="20" />
</div>
<div class="group">
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" title="Password" min="6" />
</div>
<div id="login-error-list" class="group" style="display: none;">
    <p>Errors:</p>
    <ul></ul>
</div>

Answer 1

Remove your custom messages and you’ll see what the real issue is:

http://jsfiddle.net/DLcLJ/

You have both inputs set to only accept numbers >6.

I’m assuming what you intended was minlength. Replace both min attributes with minlength and remove the max on username.