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的原因。但是当提交验证被触发一次时，我希望在密钥上触发下一个验证。

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

Answer 1

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

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

您正在询问所谓的“延迟验证”，这已经是插件的默认行为。 See documentation：

在字段标记为无效之前，验证是惰性的：之前用户可以第一次提交表单字段没有恼人的消息 - 他们不会被窃听在有机会实际输入正确值之前

只需通过删除 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
    }
},
...

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

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

1 个答案: