title: Jquery Validation with Identical Form Names
body: <p>I have a form that does 2 things:</p>
  
  <ol>
  <li>Pass a first name and email address to PHP.</li>
  <li>Dynamically add a new set of name/email fields on a click, in case the user wants to submit more than one or two sets of data.</li>
  </ol>
  
  <p>Since I don't know exactly how many sets every user may choose to submit, I pass the data to PHP in an array (using a name followed by []), so I can use a foreach loop and always get every data set. Here is some code for better understanding:</p>
  
  <pre><code>&lt;form method="post" action="submit.php" id="formID"&gt;
  &lt;table width="100%" border="0" cellspacing="0" cellpadding="0" id="contacts"&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;label class="namelabel"&gt;&lt;span&gt;Friend's First Name:&lt;/span&gt;&lt;input type="text" name="friendName[]" class="friendName" id="name1" /&gt;&lt;/label&gt;&lt;/td&gt;
      &lt;td&gt;&lt;label class="emaillabel"&gt;&lt;span&gt;Friend's Email:&lt;/span&gt;&lt;input type="text" name="friendEmail[]" class="friendEmail" id="email1" /&gt;&lt;/label&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;p class="addmore"&gt;&lt;a href="#" id="addclick"&gt;Click Here To Send This To More Friends&lt;/a&gt;&lt;/p&gt;
  &lt;input type="submit" value="Spread The News!" name="submit" /&gt;
      &lt;/form&gt;
  &lt;script language="javascript" type="text/javascript" src="include/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="include/jquery.validate.pack.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          fieldCount = 1;
          $("#addclick").click(function(e){
              e.preventDefault();
              fieldCount+=1;
              $('#contacts tr:last').after('&lt;tr&gt;&lt;td&gt;&lt;label class="namelabel"&gt;&lt;span&gt;Friend\'s First Name:&lt;/span&gt;&lt;input type="text" name="friendName[]" class="friendName" id="name' + fieldCount + '" /&gt;&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;label class="emaillabel"&gt;&lt;span&gt;Friend\'s Email:&lt;/span&gt;&lt;input type="text" name="friendEmail[]" class="friendEmail" id="email' + fieldCount + '" /&gt;&lt;/label&gt;&lt;/td&gt;&lt;/tr&gt;');
          });
          $("#formID").validate({
  rules: {
      "friendName[]": "required",
      "friendEmail[]": "required email",
    }
  });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>The problem is, however, that only the first friendName[] and friendEmail[] get validated on submission. You have to click on any other fields with the same name to get validation working (Like the lazy validation only kicks in after focus)</p>
  
  <p>How can I use the same name for a form field, and get all of them validated at the same time?</p>