jQuery验证不评估所有字段

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).