jQuery 验证，首先验证 onsubmit，然后下一次验证 onkeyup

Question

我有一个绑定了 jquery 验证的基本表单。

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 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
        }
    }

});

在用户第一次提交表单之前，我不需要任何验证。这就是我将 onkeyup 和 onfocusout 设置为 false 的原因。但是当提交验证被触发一次时，我希望在 keyup 上触发下一次验证..

是否可以通过这种方式自定义 jquery 验证插件？

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 ?

您要求的是所谓的“惰性验证”，这已经是插件的默认行为。 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

因此只需通过删除 onkeyup: false 和 onfocusout: false 即可恢复插件的默认功能。（根据文档，您不能将它们设置为 true。）

您还必须删除 onsubmit: true because like onkeyup and onfocusout, that is already the default behavior. As per documentation, "true 不是此选项的有效值"。

换句话说，您的设置正在中断 and/or 阻止您请求的确切行为...

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

删除以上三行。

否则，您可以通过覆盖 onfocusout 和onkeyup 回调函数来根据自己的喜好调整行为。这些是默认值...

$('#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
        }
    },
    ....

为了防止onfocuout在第一次提交后触发，修改如下。（默认的“懒惰”行为仅忽略 required 焦点规则。）

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

还要确保您使用的是最新版本的插件。

jQuery 验证，首先验证 onsubmit，然后下一次验证 onkeyup

jQuery Validation, first validation onsubmit, then next validations onkeyup

jquery

jquery-validate

onsubmit

onkeyup