javascript - jQuery 如何确保多个选择框中至少有一个选择框具有值

Question

我有一个动态表单，用户可以在其中添加多个选择框:

<form id="ticket_form">
  <select class="required" name="quantity[1]"></select>
  <select class="required" name="quantity[2]"></select>
  <select class="required" name="quantity[3]"></select>
</form>

目前，我确保用户已为每个选择框选择了一个值:

$("#ticket_form").validate({
  rules: {
    'quantity[]': 'required'
  },
  messages: {
    'quantity[]': 'This field is whack'
  }
});

我实际上只需要其中之一即可获得选定的值。当至少一个选择框有值时，我应该怎么做才能让验证通过？

更新

这是我最终根据 Ben Barden 的解决方案解决问题的代码:

$.validator.addMethod("groupSelect", (function(value, element, isRunning) {
  return $(".required[value!=\"\"]").length > 0;
}), "At least one must be selected.");

我还在 required 类中添加了一个额外的类规则，因此我不必向实际验证规则添加更多内容:

$.validator.addClassRules({
  'required': {
    'groupSelect': true
  }
});

Answer 1

为此，您几乎必须创建自己的验证规则，但您需要的规则非常简单。该类的所有成员都将验证该类中是否存在具有默认值以外的值的任何成员。因此，您使用类选择器，然后通过值不等于选择器进一步过滤，并检查结果是否包含任何内容。

    jQuery.validator.addMethod(
    "groupSelect",
    function (value, element, isRunning)
    {
        return $('.groupSelectClass[value!="defaultSelectValue"]').length > 0;
    },
    "At least one must be selected.");

然后只需将 groupSelect 规则(写在那里的规则)应用于 groupSelectClass 类(您确保在生成时将其添加到所有选择器中)并确保无论您用什么来代替 defaultSelectValue，实际上都是选择器的默认值。请注意，这一切都需要在基本 validate 调用之前设置，而不是之后。

编辑:

进一步说明:上面的代码块通过名称 groupSelect (或您放在那里的任何内容)定义了一个验证规则。正如所写的，当且仅当至少一个具有“groupSelectClass”类的节点具有“defaultSelectValue”以外的某个值时，groupSelect 规则才返回有效。如果您确保类“groupSelectClass”的所有内容都是默认值为“defaultSelectValue”的选择框，则当且仅当至少设置了其中一个选择框时，此规则才会返回有效。如果您随后使用 jQuery.validator.addClassRules 函数将此规则应用于“groupSelect”类，它将导致所有这些选择框都将其作为验证要求，并显示“至少一个必须被选择。”验证失败时。 http://docs.jquery.com/Plugins/Validation/Validator/addClassRules应该能让您充分了解如何使用 addClassRules 函数。事实上，如果您打算使用该网站做很多事情，我建议您总体上阅读该网站中的内容，特别是验证插件信息。