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

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

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

您要求的是所谓的“延迟验证”，这已经是插件的 默认 行为。 See documentation:

在字段被标记为无效之前，验证是惰性的：之前 第一次提交表单，用户可以tab通过 字段不会收到烦人的消息——它们不会被窃听 在有机会实际输入正确值之前

所以只需删除 onkeyup: false 和onfocusout: false 即可恢复插件的默认功能。 （根据文档，您不得将这些设置为 true。）

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

换句话说，您的设置正在破坏和/或阻止您请求的确切行为...

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

---

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