jQuery Validation, first validation onsubmit, then

Question

I have a basic form with a jquery validation bound to it.

HTML :

<form id="form-subscribe" method="post">
    <div class="register_pane_content">
        <label>Nom</label>
        <input placeholder="Votre nom" type="text" id="lastname" name="lastname" value="" class=""/>
    </div>

    <div class="register_pane_content">
        <label>Prénom</label>
        <input placeholder="Votre prénom" type="text" id="firstname" name="firstname" value="" class=""/>
    </div>

    <div class="register_pane_content ">
        <label>E-mail</label>
        <input placeholder="Votre e-mail" type="text" id="email" name="email" value="" class=""/>
    </div>

    <div class="clear">&nbsp;</div>

    <div class="register_pane_content ">
        <label>Confirmation e-mail</label>
        <input placeholder="Votre e-mail" type="text" id="emailConfirm" name="emailConfirm" value="" class=""/>
    </div>

    <div class="register_pane_content">
        <input class="nh_evoButton" type="submit" value="Valider" />
    </div>
</form>

jQuery Validation :

// Validation du formulaire principal
$('#form-subscribe').validate({
    onkeyup: false,
    onfocusout: false,
    onsubmit: true,
    rules: {
        "lastname": {
            required: true
        },
        "firstname": {
            required: true
        },
        "email": {
            required: true,
            email: true
        },
        "emailConfirm": {
            required: true,
            equalTo: '#email'
        },
        "phone": {
            number: true,
            minlength: 10
        }
    }

});

I don't want any validation until the user submit the form for the first time. That's why I set onkeyup and onfocusout to false. But when the submit validation is triggered once, I'd like the next validations to be triggered on keyup..

Is it possible to customize jquery validation plugin this way ?

Answer 1

I don't want any validation until the user submit the form for the first time. That's why I set onkeyup and onfocusout to false. But when the submit validation is triggered once, I'd like the next validations to be triggered on keyup.

Is it possible to customize jquery validation plugin this way ?

You are asking for what's called "lazy validation", which is already the default behavior of the plugin. See documentation:

Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages – they won't get bugged before having the chance to actually enter a correct value

So simply restore the plugin's default functionality by removing onkeyup: false and onfocusout: false. (As per docs, you must not set these to true.)

You also have to remove onsubmit: true because like onkeyup and onfocusout, that is already the default behavior. As per documentation, "true is not a valid value" for this option.

In other words, your settings are breaking and/or preventing the exact behavior you're requesting...

onkeyup: false,    // <- preventing all key up validation
onfocusout: false, // <- preventing all focus out validation
onsubmit: true,    // <- likely breaking something else

Remove all three lines above.

---

Otherwise, you could tweak the behavior to your exact liking by over-riding the onfocusout and onkeyup callback functions. These are the defaults...

$('#form-subscribe').validate({
    onfocusout: function(element) {
        if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
            this.element(element); // triggers validation on the field
        }
    },
    onkeyup: function(element, event) {
        if (event.which === 9 && this.elementValue(element) === "") {
            return;
        } else if (element.name in this.submitted || element === this.lastElement) {
            this.element(element); // triggers validation on the field
        }
    },
    ....

---

To prevent onfocuout from firing until after the first submit, modify it as follows. (The default "lazy" behavior only ignores the required rule on focus out.)

onfocusout: function(element) {
    if (!this.checkable(element) && element.name in this.submitted) {
        this.element(element); // triggers validation on the field
    }
},
...

---

Also make sure that you're using the latest version of the plugin.