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

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

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

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

编辑：

进一步说明：上面的代码块定义了一个名称为groupSelect的验证规则（或者你放在那里的任何东西）。如上所述，当且仅当至少有一个具有类＆＃34; groupSelectClass＆＃34;的节点时，groupSelect规则才返回有效。除了＆＃34; defaultSelectValue＆＃34;之外还有一些其他值。如果你确保所有的东西都与班级＆＃34; groupSelectClass＆＃34;是一个默认值为＆＃34; defaultSelectValue＆＃34;的选择框，当且仅当至少设置了其中一个选择框时，此规则才会返回有效。然后，如果您将此规则应用于＆＃34; groupSelect＆＃34;使用jQuery.validator.addClassRules函数的类，它将导致所有这些选择框将其作为验证要求，并显示＆＃34;必须至少选择一个。＆＃34;验证失败。 http://docs.jquery.com/Plugins/Validation/Validator/addClassRules应该让您充分了解如何使用addClassRules函数。实际上，我建议您一般性地阅读该网站中的内容，特别是验证插件信息，如果您将使用它做很多事情。

Answer 2

我有一个检查这个功能，但这是一个非.validate（）方法

function CheckValue(){
    var oneSelected = false;


     $('#ticket_form select').each(function(k,v){

          // this assumes that zero is an unselected index 
          if($(v).children('option:selected').val() != 0){

             oneSelected = true;

           }

     });

     return oneSelected;
}

Answer 3

var index = [];

$('.required').each(function(i) {
    if ($(this).val() != null) { // Check for null or undefined if not proceed
        index.push(i);
    }
});

index现在有一个包含值的选择框的索引数组。使用index[0]访问它们，其中0是第一个匹配的选择值。

var selectVal = $('.required').eq(index[0]).val();

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

3 个答案: