jQuery验证插件未评估所有字段

Question

我正在为一位客户制作基于向导的订单系统页面的新布局。他们会订购一组材料，但是这些材料可以在订单过程中组合在一起，以便例如可以订购任意组合的10件红色、蓝色和/或绿色小部件。各字段的总和不能超过预先计算的最大值。大多数材料都是每组一个简单的选择。

我在其他页面上使用了jQuery validate，并使用addClassRules方法对页面上的所有输入元素进行验证，这个方法效果很好。但我现在正在处理的例子让我感到困惑，因为它只会捕捉到表单提交时第一个验证失败的情况，但提交后它通常会捕捉到其他情况，但从未捕捉到完整的验证失败列表。

这是我的jsfiddle示例，您可以看到我正在组装什么：http://jsfiddle.net/brianmat/2nV5u/ 我使用一个错误计数片段，在几个网站上都运行良好，但在这个例子中，即使所有7个文本框都被留空，我只得到1个错误。

我的唯一主要区别在于我正在使用rowspan来分组我的项目，但我无法看出这可能是一个问题。我知道这最终会是一些相当简单的东西，但目前我正在遭遇困难。

jQuery validate代码并不复杂：

 $.validator.addClassRules({
    NumericInput: {
        required: true
    }
});

$("#theForm").validate({
    invalidHandler: function(e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields.  They have been highlighted below';
            $("div.error span").html(message);
            $("div.error").show();
        } else {
            $("div.error").hide();
        }
    },
    errorPlacement: function(error, element) {},
    submitHandler: function(form) {
        $("div.error").hide();
        form.submit();
    }
});

剩下的代码只是处理小计和仅包含数字数据输入。

我完全可以采用不同的方法来处理这个问题，因此放弃当前的代码并找到真正有效的解决方案并不是问题。如果我最终做的就是把一个方形钉子塞进圆洞里，那么我宁愿不这样做。

- BrianM

Answer 1

别忘了那个讨厌的name属性：

<input id="Text1" name="Text1" type="text" class="NumericInput group1" materialgroup="1" />
<!--              ^^ -->

更新示例： http://jsfiddle.net/2nV5u/6/

此外，考虑使用data-*属性而不是添加自己的属性到元素中（例如使用data-materialgroup代替materialgroup）。

- Andrew Whitaker

---

现在我感觉自己像个白痴。看起来问题已经解决了，而我一直有这种隐隐的感觉，它会是一些简单的东西。非常感谢！ - BrianM

另外，我确实查看了data-*元素与属性元素之间的区别，但是我发现在使用attr()方法时出现了一些数据格式化问题。在阅读了这里的一个有趣的注释后，我选择了这种方式。http://lookfirst.com/2011/12/dont-use-jquery-data-method-use-attr.html - BrianM

@BrianM：那篇文章的作者是正确的，但如果您使用.attr("data-*")来获取数据，则不应该出现格式问题。 - Andrew Whitaker

我现在明白了。谢谢你的提示。我正在比较data('key')调用和attr('data-key')调用。这是个好建议。 - BrianM