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

Question

我使用jQuery验证插件组合了一个表单，除了复选框之外，所有输入都可以处理工作验证和错误消息。我有两个复选框问题。

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

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函数。在这里，简单的情况可能不会对您有多大帮助--我不必担心这些错误是否在复选框组中，在我的形式中，如果有任何错误，这将是相同的问题--至少每个字段集中没有检查一个复选框。对于您来说，我认为您必须深入验证插件的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();
       }
   }
 });

对于你问题的第二部分，我想“依赖”规则是你想要的。因此，不需要实际添加类，只需为子组设置一个取决于被选中的父复选框的规则(参见rules方法docs中几乎完美的示例)。