Question

I am using the jquery form validation plugin to validate a long form. If a user submits the form with multiple fields that fail to validate, the cursor returns to the last field that did not pass. Instead, I want the cursor to be returned to the first field in the form that failed validation. Rather than modifying the plugin, I would like to override focusInvalid, which is nested inside “prototype: {…}”:

focusInvalid: function() {
    if( this.settings.focusInvalid ) {
        try {
            $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible").focus();
        } catch(e) {
            // ignore IE throwing errors when focusing hidden elements
        }
    }
},

I’ve tried adding my own version of focusInvalid within the following, but I haven’t been able to get that to work:

$("form#user-register").validate({. . .});

Any pointers?

Answer 1

You can disable the selection of the first invalid input with the focusInvalid option. You can then use the invalidHandler option to set a custom function that selects the first element in your form. The invalidHandler option is the function that the plugin calls when an invalid form is submitted.

Example below:

$("form#user-register").validate({
     invalidHandler: function(form, validator){
         $(validator.invalidElements()[0]).focus();
     },
     focusInvalid:false
});