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

我已经使用jQuery Validation插件将表单放在一起，并且所有输入都可以正常工作验证和错误消息 - 复选框除外。我有两个复选框问题。jQuery验证插件：复选框组和错误消息问题

第一个是验证插件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技能，很高兴听到我错过了简单，优雅和/或显而易见的方法来做到这一点！

来源

2010-02-24 boomturn

你有没有找到解决方法呢？我面临着同样的问题，文件上传输入，而不是您的复选框。干杯。 – Nicolas 2010-06-16 08:09:56

您的问题陷入困境。这会帮助你吗？ http://stackoverflow.com/questions/1300994/jquery-validate-require-at-least-one-field-in-a-group-to-be-filled – 2011-08-17 17:33:08

我已经处理了之前类似的问题，但在我的特定情况下，我认为我有比你更容易 - 我有复选框的群体，但需要没有别的形式验证。

这里的总体思路，这可以解决您的“每一个复选框错误”的问题：

//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功能。这里是我的情况简单可能不会帮助你很多 - 我不必担心错误是否在复选框组中，在我的表单中，如果有错误，它们将是相同的问题 - 每个fieldset至少有一个复选框未被选中。对于你，我认为你将不得不深入验证插件的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(); 
     } 
    } 
});

对于你的问题的第二部分，我想一个'依赖'的规则是你在找什么。因此无需实际添加类，只是有子组的规则是依赖于被检查父复选框（见规则方法文档近乎完美的例子）。

来源

2010-06-17 17:58:14 Ryley

是的，我确实解决了我的问题，在创建特殊的errorPlacement和我强迫用户填写前两个字段。如果他不这样做，那么我使用我的errorPlacement来处理这两种情况（但是errorPlacment是另一个特定于我的文件上传输入的问题）。干杯。 – Nicolas 2010-06-18 10:12:53

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

回答

相关问题