jQuery 仅在提交时验证规则

Question

假设我有一个可以查找城市、州位置的表格。如果用户输入了错误的城市、州，我希望表单能够根据用户输入检查数据库，并查看输入是否有效。如果不是，我希望用户能够及时提示。

所以表单验证是适合我的插件。

$("#form").validate({
    rules: {
       citystate: {
           required: true,
           myCustomAjaxSyncronousCheckAgainstDBRule: true
       }

    submitHandler: function(form) {
        if ($("#form").valid()) {
            form.submit();
        }
    }
});

现在说这个表单必须在我的网站的 4 个不同的地方使用，所以重构 myCustomAjaxSyncronousCheckAgainsDBRule （假名顺便说一句）并在我的网站中使用相同的代码 4 次会很糟糕。这就是我在 JS 文件中创建自定义规则的原因。但是有没有办法只能在提交时检查规则。因为如果存在无效的用户输入，它会在每次击键时检查它，这可能非常麻烦。特别是因为我有 jQuery.ui.autocomplete 结合运行。

Answer 1

所有验证都可以独立设置（onclick、onkeypress、onsubmit 等）

文档网站上提供了演示和详细信息 http://docs.jquery.com/Plugins/Validation/validate

$("#form").validate({
   onkeyup: false,
   onclick: false
})

Answer 2

作为一种更直接的替代方法，您可以将函数传递给 jquery.validator 的

onfocusout

和

onkeyup

设置来决定是否必须在这些事件中验证元素，如下所示：

jQuery.validator.defaults.onfocusout = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}
jQuery.validator.defaults.onkeyup = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } 
    else if (element.name in this.submitted || element === this.lastElement) {
        this.element(element);
    }
}

Answer 3

$.extend($("#form-id").validate().settings, { 
    onkeyup: false, 
    onfocusout: false 
});

Answer 4

这里有一个可能可行的想法：为您不希望验证 keyup 事件的字段单独绑定 keyup 函数，并且不让它冒泡：

$('#citystateID').bind('keyup',function(){
   return false; 
});

我不知道如何绑定验证器特定事件（focusin 和 focusout），因此只要焦点离开您的“citystate”输入，它仍然会运行验证，但它更接近您想要的？

我在这里简要测试了这一点：http://jsfiddle.net/svUdp/似乎工作正常（观察你的控制台，看看发生了什么 - 很多事件被触发，但没有那么多验证）。

Answer 5

如果您尝试让特定的验证方法仅在提交事件上触发，同时允许其他验证方法正常触发（例如，在 onkeyup 事件上），那么您可以在提交事件触发时动态添加规则，然后执行验证后将其删除。绑定的顺序很重要；让它们保持秩序。

$('#form').bind('submit', function(event) {
    $('#citystate').rules('add', {myCustomAjaxSyncronousCheckAgainstDBRule: true});
    event.preventDefault();
});

$('#form').validate({
    rules: {
        citystate: { required: true }
    }
});

$('#form').bind('submit', function(event) {
    $('#citystate').rules('remove', 'myCustomAjaxSyncronousCheckAgainstDBRule');
    event.preventDefault();
});

Answer 6

$("#form").validate({
   onfocusout: false,
   onkeyup: false,
   onclick: false
});