Question

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

首先，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功能。在这里，我的案例的简单性可能对你没什么帮助 - 我不必担心错误是否在复选框组中，如果有任何错误，在我的表单中，这将是同样的问题 - 每个字段集至少没有检查一个复选框。对于你，我认为你必须深入了解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();
       }
   }
 });

对于你问题的第二部分，我想象一个'依赖'规则是你正在寻找的。所以不需要实际添加类，只需要将子组的规则取决于要检查的父复选框（请参阅规则方法文档中几乎完美的示例）。

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

1 个答案: