title: jQuery validate with a dynamic number of fields
body: <p>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.</p>
  
  <p>I'm generating the fields server-side as an array, i.e.</p>
  
  <pre><code>&lt;input id="foo[0]"...
  &lt;input id="bar[0]"...
  
  &lt;input id="foo[1]"...
  &lt;input id="bar[1]"...
  
  &lt;input id="foo[2]"...
  &lt;input id="bar[2]"... etc
  </code></pre>
  
  <p>No matter the number, all fields are required &amp; I also need to validate against type &amp; number of digits in some cases. I'm using the <a href="http://docs.jquery.com/Plugins/Validation" rel="noreferrer">jQuery validate plugin</a> for client-side processing (yes, backed up with server-side stuff too) &amp; the validation can't be done inline as the form needs to pass XHTML Strict (EDIT: see my addendum below).</p>
  
  <p>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:</p>
  
  <pre><code>$(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" }
  
          }
  
      });
  
  });
  </code></pre>