jQuery Validation Plugin Not Recognizing Valid Input

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>

This is a long shot - but it could be an issue with jQuery 1.6 (released earlier this week). I know they changed the way that attr() works, and it's used pretty heavily in the Validation plugin. Maybe try linking to 1.5.2. — Kevin Ennis
– Kevin Ennis, Commented May 7, 2011 at 0:09
I used 1.5.2 instead of grabbing the most recent version from jQuery's web site, but the problem persists, as you can still see on the login page I linked to in the original post. (Uprated your comment because it made sense, and I had problems with attr() just the other day.) — TerranRich
– TerranRich, Commented May 7, 2011 at 1:31
i think its working. I used the following plugin <script type="text/javascript" src="ajax.aspnetcdn.com/ajax/jquery.validate/1.8/…> Just try with that js file — Mahesh KP
– Mahesh KP, Commented May 7, 2011 at 4:58

James Montagne · Accepted Answer · 2011-05-07 02:58:49Z

3

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.

answered May 7, 2011 at 2:58

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TerranRich Over a year ago

Oops! I thought those were new HTML5 attributes. I blame Dreamweaver CS5 for having them pop-up while typing, and myself for making assumptions. It works now — thanks!

Collectives™ on Stack Overflow

jQuery Validation Plugin Not Recognizing Valid Input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related