jQuery 验证不评估所有字段

Question

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

我在其他页面中使用了 jQuery 验证，并且使用了 addClassRules 方法来验证页面上的所有输入元素，并且效果很好。我正在处理的当前示例让我感到困惑，因为它只捕获表单提交时的第一个验证失败，但提交后它通常会捕获其他验证失败，但永远不会捕获验证失败的完整列表。

这是我的 jsfiddle 示例，以便您可以看到我正在组合的内容:http://jsfiddle.net/brianmat/2nV5u/

我使用了一个错误计数片段，该片段已在多个网站上正常运行。在此示例中，即使所有 7 个文本框都留空，我也只收到 1 个错误。

这里唯一的主要区别是我正在执行行跨度来对我的项目进行分组，但我看不出这会在哪里出现问题。我知道这最终会变得非常简单，但此时我只是碰壁了。

jQuery 验证代码没什么奇特的:

 $.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();
    }
});

其余代码仅处理小计和纯数字数据输入。

我完全愿意采用不同的方法来处理这个问题，因此废弃我当前的代码并找到可以正常工作的代码并不是问题。如果我最终要做的就是将方钉装入圆孔，我宁愿不尝试。

Answer 1

不要忘记那个讨厌的name属性:

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

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

此外，请考虑使用 data-* 属性，而不是向元素添加您自己的属性(即 data-materialgroup 而不是 materialgroup)。