Question

我正在使用jQuery（1.8.2）和Validation plugin（1.10.0）来验证表单。我的问题是，在设置自定义invalidHandler时，即使出现错误，我的表单也会提交。

长版本

表单很长，并且有几个字段可以从视图中隐藏（使用jQuery.toggle()）以使表单更易于使用。现在，其中一些字段是“可选的”，即如果选中相应的复选框，我只关心它们的内容。所以我有类似的验证器：

emailInvitationTitle: {
     required: function() {
        return $("#emailInvitation_chk").prop("checked");
    }
},
emailInvitationBody: {
    required: function() {
        return $("#emailInvitation_chk").prop("checked");
    }
}

到目前为止，这么好。但是，如果这些“可能隐藏，可能需要”字段中的任何一个在提交时无效，我想显示相关的隐藏部分（使用类“messageEditor”）。所以我有invalidHandler这样：

invalidHandler: function(form, validator) {
    // If either title or body is empty, make sure their parent div is visible
    if (!(validator.element("#emailInvitationTitle") 
            && validator.element("#emailInvitationBody"))) {
        $("#emailInvitationTitle").closest(".messageEditor").show();
    }
}

问题在于，通过定义此invalidHandler，我的表单始终会被提交，无论验证是否成功。我在jquery.validate.js中挖掘并观察了以下内容（在331行及以后）：

    // http://docs.jquery.com/Plugins/Validation/Validator/form
    form: function() {
        this.checkForm();
        $.extend(this.submitted, this.errorMap);
        this.invalid = $.extend({}, this.errorMap);
        if (!this.valid()) {
            $(this.currentForm).triggerHandler("invalid-form", [this]);
        }
        this.showErrors();
        return this.valid();
    },

我不会假装我理解其中的一半。但是在跟踪这个时，我注意到this.valid()在第一次调用时正确返回false，这会导致invalidHandler触发。但是，return this.valid()会立即产生true。不知何故，触发器（？）清除了验证器的errorList数组，导致无效表单被提交。

这是验证插件或jQuery本身（或其他）的错误吗？

有关修复/解决方法的任何建议吗？

Answer 1

用我最终使用的解决方法回答我自己的问题。

我通过修改form中的jquery.validate.js函数来解决此问题：

// http://docs.jquery.com/Plugins/Validation/Validator/form
form: function() {
    this.checkForm();
    $.extend(this.submitted, this.errorMap);
    this.invalid = $.extend({}, this.errorMap);
    var errorListCopy = this.errorList.slice(); // hack, step 1
    if (!this.valid()) {
        $(this.currentForm).triggerHandler("invalid-form", [this]);            
        this.errorList = errorListCopy.concat(this.errorList); // hack, step 2
    }
    this.showErrors();
    return this.valid();
},

仍然不太喜欢正确的方法，但它对我有用。

Answer 2

我遇到了同样的问题。这似乎是插件中的一个错误。我解决这个问题的方法如下：

submitHandler: function(form) {
  if ($(form).validate().numberOfInvalids() != 0) {
    return false;
  }
  form.submit();
},

jQuery / Validation：始终提交带有invalidHandler的表单

长版本

2 个答案: