jQuery validate with a dynamic number of fields

Question

I have a form with a stage that has a dynamic number of groups of fields, where the number is based upon answers in the previous stage.

I'm generating the fields server-side as an array, i.e.

<input id="foo[0]"...
<input id="bar[0]"...

<input id="foo[1]"...
<input id="bar[1]"...

<input id="foo[2]"...
<input id="bar[2]"... etc

No matter the number, all fields are required & I also need to validate against type & number of digits in some cases. I'm using the jQuery validate plugin for client-side processing (yes, backed up with server-side stuff too) & the validation can't be done inline as the form needs to pass XHTML Strict (EDIT: see my addendum below).

My problem is that I can't work out how to use validate with a dynamic number of fields. Here's what the validate syntax typically looks like for the rest of the form:

$(document).ready(function() {

    // validate stage_form on keyup and submit
    var validator = $("#form_id").validate({

     // rules for field names
     rules: {

      name: "required", 
      address: "required",
      age: { required: true, number: true }

     },

     // inline error messages for fields above
     messages: {

      name: "Please enter your name", 
      address: "Please enter your address",
      age: { required: "Please enter your age", number: "Please enter a number" }

     }

    });

});

Answer 1

No answers so I'll post my "interim" solution, which is to set inline validation rules for 'required' and 'type', leaving 'maxlength' to server-side checking, then display custom messages with an inline title tag.

This is probably good enough for the purposes of this job, but I'm still curious if there's a way to do it 'completely' within jQuery.

Answer 2

A server-side hack

This is not a jQuery solution, but you could generate some of the validation rules server-side.

For example, if you were using PHP for the HTML:

<?PHP
$numfields = 10;

for ($i=0; $i<$numfields; $i+=1) {
?>
<input id="foo<? echo $i ?>"
<?
}

...you could also use PHP to output matching rules:

for ($i=0; $i<$numfields; $i+=1) {
?>
foo<? echo $i ?>: { required: true, number: true }
<?
}

Answer 3

Have you tried to use custom class rules to define the xhtml incompatible rules?

The example in the docs only uses one class, but I suppose you could combine different custom classes to achieve the validation rules you need. I haven't tried this for myself.

Answer 4

Hello, actually it should work If you'd use classes instead of initializing rules as validate() options.

Markup:

<input id="foo[0]" class="required"
<input id="bar[0]" class="required number"

<input id="foo[1]" class="required"
<input id="bar[1]" class="required email"

jQuery:

$(document).ready(function() {

  var validator = $("#form_id").validate({
    messages: {
            name: "Please enter your name", 
            address: "Please enter your address",
            age: { 
               required: "Please enter your age", 
               number: "Please enter a number" 
            }

    }

  });

});

hope this works. Sinan.