Question

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

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

这是我的jsfiddle样本，所以你可以看到我在一起的内容：http://jsfiddle.net/brianmat/2nV5u/

我使用了一个错误计数代码段，该代码片段在多个站点上都没有问题。在这个例子中，即使所有7个文本框都留空，我也只得到1个错误。

我唯一的主要区别是我正在做一个rowpan来分组我的项目，但我看不出那会是一个问题。我知道这最终会变成非常简单的东西，但此时我只是在它上面打了一堵墙。

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）。

jQuery验证不评估所有字段

1 个答案: