我正在使用出色的 jQuery Validate Plugin来验证某些表单。在一个表单上，我需要确保用户至少填写一组字段中的一个。我想我有一个很好的解决方案，并想分享它。 请提出您能想到的任何改进。
找不到内置的方法，我搜索并找到了Rebecca Murphey 的自定义验证方法，这非常有帮助。
我从三个方面改进了这一点：
- 让您传入一组字段的选择器
- 让您指定必须填充多少组才能通过验证
- 一旦其中一个通过验证，就将组中的所有输入显示为通过验证。（见最后对尼克·克拉弗的喊叫。）
因此，您可以说“必须填充与选择器 Y 匹配的至少 X 个输入”。
最终结果，标记如下：
<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">
...是一组这样的规则：
// Both these inputs input will validate if
// at least 1 input with class 'productinfo' is filled
partnumber: {
require_from_group: [1,".productinfo"]
}
description: {
require_from_group: [1,".productinfo"]
}
第 3 项假设您.checked在成功验证后向错误消息中添加一个类。您可以按如下方式执行此操作，如此处所示。
success: function(label) {
label.html(" ").addClass("checked");
}
在上面链接的演示中，我使用 CSS 给每个span.errorX 图像作为其背景，除非它有 class .checked，在这种情况下它会得到一个复选标记图像。
到目前为止，这是我的代码：
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
//Look for our selector within the parent form
var validOrNot = $(selector, element.form).filter(function() {
// Each field is kept if it has a value
return $(this).val();
// Set to true if there are enough, else to false
}).length >= numberRequired;
// The elegent part - this element needs to check the others that match the
// selector, but we don't want to set off a feedback loop where each element
// has to check each other element. It would be like:
// Element 1: "I might be valid if you're valid. Are you?"
// Element 2: "Let's see. I might be valid if YOU'RE valid. Are you?"
// Element 1: "Let's see. I might be valid if YOU'RE valid. Are you?"
// ...etc, until we get a "too much recursion" error.
//
// So instead we
// 1) Flag all matching elements as 'currently being validated'
// using jQuery's .data()
// 2) Re-run validation on each of them. Since the others are now
// flagged as being in the process, they will skip this section,
// and therefore won't turn around and validate everything else
// 3) Once that's done, we remove the 'currently being validated' flag
// from all the elements
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
// .valid() means "validate using all applicable rules" (which
// includes this one)
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));
万岁！
喊出来
现在大喊大叫-最初，我的代码只是盲目地将错误消息隐藏在其他匹配字段上，而不是重新验证它们，这意味着如果还有其他问题（例如“只允许数字并且您输入了字母”） ，在用户尝试提交之前它一直隐藏。这是因为我不知道如何避免上面评论中提到的反馈循环。我知道一定有办法，所以我问了一个问题，Nick Craver启发了我。谢谢，尼克！
已解决的问题
这最初是一个“让我分享一下，看看是否有人可以提出改进建议”之类的问题。虽然我仍然欢迎反馈，但我认为它在这一点上已经很完整了。（它可能更短，但我希望它易于阅读，不一定要简洁。）所以尽情享受吧！
更新 - 现在是 jQuery 验证的一部分
这已于2012 年 4 月 3 日正式添加到 jQuery 验证中。