Question

I’m using this plugin:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

For JQuery form validation. Everything is working great except for the email field. As soon as I start typing in that field, the “Please enter a valid email address.” message appears, even though what I’ve typed so far is correct.

In the documentation (http://docs.jquery.com/Plugins/Validation) it says:

“Before a field is marked as invalid, the validation is lazy: Before
submitting the form for the first time, the user can tab through
fields without getting annoying messages – he won’t get bugged before
he had the chance to actually enter a correct value”

But this doesn’t seem to happen for the email field.

This problem can also be seen in the author’s demo:
http://jquery.bassistance.de/validate/demo/

Is there an option/workaround for this behaviour?

Answer 1

“Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through
fields without getting annoying messages – he won’t get bugged before
he had the chance to actually enter a correct value”

But this doesn’t seem to happen for the email field.

It’s not just with the email rule. You can see the same behavior on the minlength rule.

http://jsfiddle.net/f3sxF/

Is there an option/workaround for this behaviour?

You could use the pre-release version which seems to fix this. However, rather than risking new bugs by the use of a “pre-release” version of the plugin on your production site, you could simply use a modified version of the onkeyup callback function…

$('#myform').validate({
    onkeyup: function (element, event) {
        if (event.which === 9 && this.elementValue(element) === '') {
            return;
        } else if (element.name in this.submitted ) {
            this.element(element);
        }
    },
    // your other options
});

Using the above, all onkeyup validation is ignored until the form is submitted for the first time, or until the user tabs out of a field which contains entered data.

Demo: http://jsfiddle.net/wNj4n/