3

我正在使用 jQuery (1.8.2) 和验证插件(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();
    }
}

问题是，似乎通过定义 this 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数组，导致提交无效的表单。

这是 validate 插件的错误，还是 jQuery 本身（或其他东西）的错误？

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

4

2 回答 2

0

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

我通过修改以下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();
},

仍然感觉不是正确的方法，但它对我有用。

于 2013-01-26T08:52:31.903 回答
0

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

submitHandler: function(form) {
  if ($(form).validate().numberOfInvalids() != 0) {
    return false;
  }
  form.submit();
},
于 2014-01-27T17:17:50.263 回答