jQuery validation plugin - validate on $.blur seemed to change on upgrade to 1.9

blur, jquery, jquery-validate

Solution

By default, for text input, jQuery Validate is triggered on "blur" (`onfocusout:`), "keyup" (`onkeyup:`) and "submit" (`onsubmit:`) events.

To have it only validate fields on "blur" and "submit", simply set `onkeyup:` option to false...

$(document).ready(function() {

    $('#myform').validate({
        onkeyup: false, // to use onkeyup, remove this line
        // other rules and options
    });

});

All versions work the same...

Working Demo (v1.10): http://jsfiddle.net/M2MLL/

Working Demo (v1.9): http://jsfiddle.net/KSgLb/

Working Demo (v1.8): http://jsfiddle.net/k87Lp/

The default behavior for `onfocusout` is such that validation on the field will only start to occur after something has been left in the field (or after the initial submit event), otherwise simply leaving the field empty and clicking away to a new field does nothing.

If you want validation to occur on "blur" every single time, no matter what, just modify the callback function for `onfocusout:` like this...

$(document).ready(function() {

    $('#myform').validate({
        onfocusout: function(element, event) {
            this.element(element);
        },
        onkeyup: false,
        // other rules and options
    });

});

Working Demo (v1.9): http://jsfiddle.net/eRNTu/

Version 1.10 also working: http://jsfiddle.net/Mev8v/

BTW: Although I wouldn't do this with `.blur()`, your original code was working fine with v1.9 and v1.10. However, I believe that leveraging the internal functionality of the plugin's `onfocusout:` option is a much more robust way to achieve your goal.

EDIT 2:

In response to OP's last clarification:

"That on initial entry, there is no active validation until on blur, but once a field is in an error state the field should actively validate on change, keyup, etc."

Here is a new working demo which modifies the default callback function for `onkeyup:`

    onkeyup: function (element, event) {
        if (event.which === 9 && this.elementValue(element) === '') {
            return;
        } else if (element.name in this.submitted ) {
            this.element(element);
        }
    },

The field will ignore any `onkeyup` validation initially or when no error is being shown. Only when there is an active error and the user goes back to the field will `onkeyup` validation start to operate.

Working Demo: http://jsfiddle.net/6s4rj/

Problem

With validation 1.8, I used a $.blur function on all the form's input elements to trigger validation on that field when the user tabs out: ``` $('#myform :input').blur(function() { $("#myform").validate().element( this ); }); ``` Which worked great. However I just updated to 1.9 and now my fields are validating on keyup instead of blur. I didn't change anything with my setup, just switched to 1.9. I see there have been a lot of changes, but I don't see additional documentation. Any help would be appreciated. Clarification prior, my elements would initially validate on blur, but if an element was in an error state, the element would actively validate on keyup, etc. if a user went back in to make a change. This is my desired behavior. That on initial entry, there is no active validation until on blur, but once a field is in an error state the field should actively validate on change, keyup, etc. Now, the element is validating on keyup on initial entry

Original source