Question

I have a dynamic form where the user can add multiple select boxes:

<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>

At the moment, I’m making sure that the user has chosen a value for each select boxes:

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

I only actually need to have one of them to have a selected value. What should I do to let the validation pass when at least one of the select boxes has a value?

UPDATE

This is the code that I ended up with to solve my problem as per Ben Barden’s solution:

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

I also added an additional class rule to the required class, so I don’t have to add any more to the actual validation rules:

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

Answer 1

For this, you’re pretty much going to have to create your own validation rule, but the rule you need is pretty simple. All members of that class will validate if there exists any member of that class with a value other than the default. Thus, you use the class selector, then filter further by the value not-equals selector, and check if the result contains anything.

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

then just apply the groupSelect rule (the one written there) to the groupSelectClass class (which you make sure is added to all of your selectors on generation) and ensure that whatever you have in place of defaultSelectValue is actually the default value for the selectors. Note that this all needs to be set up before the base validate call, not after.

Edit:

Further explanation: the above block of code defines a validation rule by the name of groupSelect (or whatever you put there). As written, the groupSelect rule returns valid if and only if at least one of the nodes with the class “groupSelectClass” has some value other than “defaultSelectValue”. If you make sure that everything with the class “groupSelectClass” is a select box with a default value of “defaultSelectValue”, then this rule will return valid if and only if at least one of those select boxes has been set. If you then apply this rule to the “groupSelect” class using the jQuery.validator.addClassRules function, it will cause all of those select boxes to have that as a validation requirement, and display “At least one must be selected.” on validation failure. http://docs.jquery.com/Plugins/Validation/Validator/addClassRules should give you enough understanding of how to use the addClassRules function. Indeed, I’d recommend you read up on the stuff in that site in general, particularly the validation plugin information, if you’re going to be doing much with it.