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

I wrote a generic solution to avoid applying valitation until first submit occurs. Just use this code after including your script 'jquery.validate.js' :

(function($){

var _validate = $.fn.validate;

$.fn.validate = function(){
    var result, args = Array.prototype.slice.apply(arguments);
    this.each(function(){
        var $this = $(this),
            lazyValidate = $this.data('lazy-validate');
        // Lazy validation has been initialized: just delegate
        if( lazyValidate === true ){
            result = _validate.apply($this, args);
            return;
        }
        // Init, if not yet
        if( !lazyValidate ){
            // Create Lazy Form 
            lazyValidate = $('<form />')[0];
            $this.data('lazy-validate', lazyValidate);
            // Add One-Time submit handlder
            $this.one('submit.lazy-validate', function(){
                var $this = $(this);
                // Apply validation options now
                _validate.call($this, $(lazyValidate).data('validator').settings);
                // Mark lazy validation has initialized
                $this.data('lazy-validate', true);
                // Test Valid
                return $this.valid();
            });
        }
        // Apply Method to Lazy Form
        result = _validate.apply($(lazyValidate), args);
    });
    return result === undefined ? this : result;        
};  

})(jQuery);

Keep in mind that solution would not work if you are using field's methods: rules(), removeAttrs().

Finally, I think this functionality should be included in the valation plugin as a simple validate() option; but until that I'll still using this trick.

Answer 2

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/