jQuery Validate plugin with multiple select boxes

Question

I'm using jQuery Validate to validate my form. The problem is that I have a form with multiple select boxes (dynamic number) and it has a dynamic name -> answers[$question['id']]

I've seen some scripts when there's a fixed name you can use that to address all the input fields like so.

$('#form').validate({
    rules: {
        "answers[]" = "required"
    }
});

But in my example this is not possible, Any ideas? Thanks!

You have a syntax error. it's field: rule, not field = rule. — Sparky
– Sparky, Commented Sep 25, 2013 at 17:11

Sparky · Accepted Answer · 2013-09-25 17:10:03Z

14

Firstly,

it's not "answers[]" = "required"

it's "answers[]": "required"

Notice the colon in place of your equals sign.

$('#form').validate({
    rules: {
        "answers[]": "required"
    }
});

Secondly, that would only assign the required rule to a single field with name="answers[]".

If you want to easily assign this rule to multiple fields with name="answers[1]", name="answers[2]", name="answers[3]", etc., then you'll need to do one of two things...

1) Declare the required rule inline...

using class:

<input type="text" name="answers[1]" class="required" />
<input type="text" name="answers[2]" class="required" />
<input type="text" name="answers[3]" class="required" />

OR with HTML5:

<input type="text" name="answers[1]" required="required">
<input type="text" name="answers[2]" required="required">
<input type="text" name="answers[3]" required="required">

And jQuery:

$('#form').validate(); // initialize the plugin

DEMO #1: http://jsfiddle.net/7JHWf/

2) Or assign the rule dynamically using the rules() method to all fields with a name starting with answers:

$('#form').validate(); // initialize the plugin

// assign the rules
$('input[name^="answers"]').each(function() {
    $(this).rules('add', {
        required: true
    });
});

DEMO #2: http://jsfiddle.net/7JHWf/1/

answered Sep 25, 2013 at 17:10

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Limon Over a year ago

what a great answer. Just what i was looking for!

Henry Gibson · Accepted Answer · 2013-09-25 14:42:32Z

0

You can just select the select boxes you're interested in by grabbing all select boxes or adding a specific class to them, then using each() to loop through:

$('select') or $('select.specificClass').each(function() {}

You don't need to know the name / id of each box to be able to select and loop through it. You can reference the current item value within the each() loop using:

$(this).val()

answered Sep 25, 2013 at 14:42

Henry Gibson

2,0782 gold badges15 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery Validate plugin with multiple select boxes

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related