代码之家 › 专栏 › 技术社区 › VaN

jQuery验证,第一次验证onsubmit,然后下一次验证onkeyup

onkeyup onsubmit jquery-validate jquery

VaN · 技术社区 · 11 年前

我有一个绑定了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
        }
    }

});

在用户第一次提交表单之前,我不希望进行任何验证。这就是为什么我设置了keyup和onfocus为false。但是当提交验证被触发一次时,我希望在keyup上触发下一次验证。。

可以这样定制jquery验证插件吗?

1 回复 | 直到 11 年前

Community Mohan Dere 6 年前

在用户提交表单之前,我不希望进行任何验证第一次。这就是为什么我设置了keyup和onfocus为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 , " 真的 是不有效值 “用于此选项。

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

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

去除以上三行。

否则,您可以根据自己的喜好调整行为 过度乘坐 这个 聚焦 和 打开键盘 回调函数。这些是默认值。。。

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

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