jQuery Validation 插件：复选框组和错误消息问题

Question

我使用 jQuery Validation 插件整理了一个表单，所有输入都可以正常工作的验证和错误消息——除了复选框。我有两个复选框问题。

首先是验证插件 API 似乎不处理分组上下文中的复选框（我使用字段集进行分组）。在这里找到了解决该问题的几种方法，包括 Rebecca Murphey 对a post 的引用，以了解使用自定义方法和类的更一般情况。适应这种情况：

jQuery.validator.addMethod('required_group', function(val, el) {
        var fieldParent = $(el).closest('fieldset');
        return fieldParent.find('.required_group:checked').length;
});

jQuery.validator.addClassRules('required_group', {
        'required_group': true
});

jQuery.validator.messages.required_group = 'Please check at least one box.';

这种方法有效，但会在每个复选框上产生错误消息，并且仅在单击每个框时将其删除。这对于用户来说是不可接受的情况，他们只能通过点击误报来摆脱它们。理想情况下，我想需要的是在显示之前阻止或消除额外消息，并使用 errorPlacement 在父字段集中显示单个错误消息，然后单击任何复选框将其删除。不太理想的是，也许它们都会显示，但事件处理程序可以通过单击关闭全套冗余消息，这就是 tvanfosson 提供的this approach 似乎所做的。 （另一种自定义方法here，但我无法让它工作。）我想我还应该注意这个表单要求复选框具有不同的名称。

我的第二个问题是表单中带有复选框的字段集之一在外部复选框之一下还包含一个 嵌套 复选框字段集。因此，除了第一级单选框的要求外，如果包含第二级复选框的特定复选框被选中，则必须至少选中一个第二级框。不确定正确的方法；我猜需要发生什么（按照上述方案）是触发器复选框将使用 toggleClass 将“required_group”类添加/删除子字段中的所有复选框，然后（希望）行为与父项相同字段：

$("#triggerCheckbox").click(function () {
  $(this).find(":checkbox").toggleClass("required_group");
});

欢迎提出任何建议或想法。我已经远远超出了我在这方面有限的 jQuery 技能，并且很高兴听到我错过了简单、优雅和/或明显的方法来做到这一点！

Answer 1

我之前处理过类似的问题，尽管在我的具体情况下，我认为我比你更容易 - 我有复选框组，但表单中的其他任何内容都不需要验证。

这是一个大概的思路，它可能会解决您“每个复选框一个错误”的问题：

//for each fieldset, attach a new rule to the first checkbox
$('fieldset input[type="checkbox"]:first').each(function(i,v){
    $(v).rules('add', {
         required: "fieldset input[type="checkbox"]:unchecked"
    });
});

为了正确处理验证错误，请实现您自己的showErrors 函数。这就是我的案例的简单性可能对您没有太大帮助的地方 - 如果有 any 错误，我不必担心错误是否在复选框组中，在我的表单中，这将是同样的问题——每个字段集至少有一个复选框没有被选中。对于您，我认为您必须深入研究 Validate 插件的 defaultShowErrors 函数（在源代码中），以了解如何处理 errorMap 和 errorList。

$('#myForm').validate({
   ...
   showErrors: function(map,list){
       if (this.numberofInvalids()){
           $('#form_errors').html('You much choose at least one Checkbox per group');
       } else {
           this.defaultShowErrors();
       }
   }
 });

对于您问题的第二部分，我想您正在寻找“取决于”规则。所以不需要实际添加类，只需将子组的规则设置为依赖于被选中的父复选框（参见规则方法文档中几乎完美的示例）。