jQuery Validation, first validation onsubmit, then next validations onkeyup

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 ?

Ecto

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.

Ic

I tried what you did, removing these 3 options, and it didn't work. I tried to figure why, and I found the javascript I was loading was pretty old. I upgraded it to latest (1.13.1) and everything works smoothly, lazy validation at first, then validation on focusout. Thank you. – Ecto

@VaN, I answered your question about modifying the behavior, so why did you "un-accept" my answer? There is no way anybody could have known you were using old software since you did not tell us the versions you were using. – Ic

mhh actually there is a little problem. the lazy validation is not totally working as expected. I did removed onkeyup: false,, onfocusout: false,, onsubmit: true. if I focus the email field, and dont type anything and focusout, no validation is triggered. But if I focus the field, type something in (non-valid e-mail) and focus out, the validation is triggered and the field is marked as invalid. Shouldn't first validation trigger on first submit ? – Ecto

@VaN, it's working as designed. However, you can tweak this behavior by over-riding the functions with your own. See my edits. – Ic

how to edit the onfocusout function to be triggered ONLY IF a first validation throught form submit was triggered previously ? – Ecto

@Van, try removing || !this.optional(element) – Ic

Now it works like a charm. If I understand it well, this.submitted is an array of submitted fields, so if it is filled, it means the validation occured once ? Thank you, answer is now accepted once and for all : ) – Ecto

@VaN, yes, and the default "lazy" validation only ignores the required rule on focusout, which is the "or not optional" part you've removed, || !this.optional(element) – Ic