jQuery Validation, first validation onsubmit, then next validations onkeyup

独自空忆成欢 提交于 2019-12-12 06:09:51

问题


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 ?


回答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.



来源:https://stackoverflow.com/questions/28111499/jquery-validation-first-validation-onsubmit-then-next-validations-onkeyup

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!