jQuery验证，先验证onsubmit，然后再验证onkeyup [英] jQuery Validation, first validation onsubmit, then next validations onkeyup

问题描述

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

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 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上触发.

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

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

Is it possible to customize jquery validation plugin this way ?

推荐答案

在用户提交表单之前，我不需要任何验证 第一次.这就是为什么我将onkeyup和onfocusout设置为false的原因.但当 提交验证一次触发，我想下一次验证 在键盘上触发.

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.

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

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

因此只需通过 删除 onkeyup: false和onfocusout: false恢复插件的默认功能. (根据文档，您不得将其设置为true.)

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.)

您还必须删除 onsubmit: true 因为onkeyup和，这已经是默认行为.根据文档，此选项的" 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

删除上面的所有三行.

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

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

---

为防止onfocuout触发直到第一次提交，请按如下所示对其进行修改. (默认的惰性"行为仅忽略聚焦时的required规则.)

---

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.

这篇关于jQuery验证，先验证onsubmit，然后再验证onkeyup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！