jQuery 验证，首先验证提交，然后验证 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>

j查询验证：

// 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。但是当提交验证被触发一次，我想要下一次验证在键控时触发。

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

您要求所谓的"惰性验证"，这已经是插件的默认行为。 请参阅文档：

在字段标记为无效之前，验证是延迟的：之前首次提交表单，用户可以按 Tab 键通过字段不会收到烦人的消息 - 它们不会被窃听在有机会实际输入正确的值之前

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

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

<小时 />

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