jquery validation : how to prevent on blur (focus out) validation if focus is lost to a submit button

Question

I have a text box. I do not want validation on blur to occur if after entering an invalid value in a text box I click a submit button.

If I blur to any other control - then I do want validation to occur.

Windows [desktop] forms allowed to designate a control as "no-causing-validation" for this precise situation.

Is it possible to designate a control as "no-cause-validation" in jquery validate?

Answer 1

Yes it is possible, but you have to do it in code rather than in a declarative way.

To do it you have to override the 'on' handler for the event - in this case blur (focusout)

here is an example on jsfiddle, validate code like this

$("form").validate({
    onfocusout: function (element, event) {
        if (element.id === "fname") {
            this.element(element);
        }
    }
});

with html like this

<form>
    <label for="fname">First Name</label>
    <input name="fname" id="fname" class="required number">
    <label for="sname">Last Name</label>
    <input name="sname" id="sname" class="required number">
    <input type="submit" />
</form>

It is a basic example that validates one field on blur and not the other field. You could take this further by checking for attributes on the fields you want to validate, but the general approach is

1. override the onfocousout (or onkeyup etc) with a function
2. within that function, for fields you want to validate, call element(...)

discussion on this here - https://github.com/jzaefferer/jquery-validation/issues/564