5

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

我在其他页面中使用了 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();
    }
});

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

我完全愿意用不同的方法来处理这个问题，所以废弃我当前的代码并找到可以正常工作的东西不是问题。如果那是我最终要做的事情，我宁愿不要尝试将方形钉子放入圆孔中。

4

1 回答 1

12

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

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

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

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

于 2012-05-11T12:46:17.373 回答