jQuery Validate, but only after initial submission

Question

I am using the very nice bassistance validation plugin for all my form validation needs: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

A problem I encounter: error messages appear instantly, even when a user hasn't finished completing a field. As such: invalid e-mail appears until the user has finished typing.

In the documentation here, one solution is to set the option onkeyup to false causing error messages to only appear onblur.

However, in my setup, I encounter two additional issues (not solved by the solution above)

1. Upon submitting an invalid form, error messages are not cleared when correcting them
2. When the browser autofill function used, automatically filled out fields stay marked as erroneous.

So, my initial question was: how can I make Bassistance validation fire only after the first submit AND with it's default settings from there on out?

Here's my code:

if($('#contact_form').length) {
    $("#contact_form").validate({
        rules: {
            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            message: {
                required: true
            },
            telephone: {
                required: true
            },              
            email: {
                required: true,
                email: true
            },
            email_again: {
                required: true,
                email: true,
                equalTo: "#email"
            },
            norobot: {
                required:true,
                minlength:4,
                maxlength:4,
                number:true     
            }
        }
    });
}

Please find the full JavaScript here: http://lad.chocolata.be/js/main.js

Here is a working example with bug with onkeyup set to false: http://lad.chocolata.be/nl/contact

After submitting the form with some invalid fields, the error messages do not clear upon correcting them.

What am I missing?

Answer 1

Quote OP: "So, plain and simple, my question is: how can I make Bassistance validation fire only after the first submit AND with it's default settings from there on out?"

Warning to the reader: Normally, one would call .validate() once on DOM ready to initialize the form. The code below only calls .validate() once when the submit button is initially pressed... therefore, there will be no validation whatsoever until that button is pressed the first time.

There is no need to call .validate() more than once, so I used the jQuery one() event.

$(document).ready(function() {

    $('#submit').one('click', function() {
        $('#myform').validate({
            // your rules & options
        });
    });

});

Working Demo:

http://jsfiddle.net/hSDyP/