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

Question

我已经使用jQuery Validation插件整理了一个表单,并且所有输入都可以正常工作验证和错误消息 - 复选框除外.我有两个复选框问题.

第一个是Validation插件API似乎不处理分组上下文中的复选框(我使用字段集进行分组).在这里找到了几个解决这个问题的方法,包括参考Rebecca Murphey关于使用自定义方法和类的更一般情况的帖子.适应这种情况:

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提供的这种方法.(这里有另一个定制的方法,但我无法让它工作.)我想我还应该注意这个表单要求复选框有不同的名称.

我的第二个问题是,表单中带有复选框的其中一个字段集还包含一个外部复选框下的复选框的嵌套字段集.因此,除了第一级单框检查要求之外,如果选中包含第二级复选框的特定复选框,则必须至少检查一个第二级框.不确定正确的方法; 我猜测需要发生什么(遵循上述方案)是触发器复选框将使用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函数。这就是我的案例的简单性可能对您没有多大帮助 - 我不必担心错误是否在复选框组中，在我的表单中如果有任何错误，那将是同样的问题 -每个字段集至少有一个复选框未选中。对于您来说，我认为您必须深入研究 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();
       }
   }
 });

对于您问题的第二部分，我想您正在寻找“取决于”规则。因此，不需要实际添加类，只需让子组的规则取决于正在检查的父复选框（请参阅规则方法文档中几乎完美的示例）。