title: jQuery Validate array input element which is created dynamically
body: <p>I have a form which I want to validate using <a href="http://jqueryvalidation.org/" rel="nofollow noreferrer">the jQuery Validation plugin</a>. I currently have an issue with input element with array (<code>name="inputname[]"</code>) which are created dynamically with jQuery <code>.on()</code>. Let me explain the issue:</p>
  
  <ol>
  <li>There is a form, with one input text exist named <code>name[]</code>.</li>
  <li>There is a button to add more input texts, and this element executed with .on(). I clicked 2 or 3 times so there will be more than 1 input texts.</li>
  <li>I click submit, the form is correctly validate but it is only validate the first created array element and not the another element.</li>
  </ol>
  
  <p>For full code I created a jsfiddle here: <a href="http://jsfiddle.net/ThE5K/4/" rel="nofollow noreferrer">http://jsfiddle.net/ThE5K/4/</a></p>
  
  <p><strong>jQuery</strong>:</p>
  
  <pre><code>$(document).ready(function () {
  
      // MODE 1
      //   With [] or array name &lt;&lt;&lt;&lt; this one is not working
      $("#addInput").on('click', function () {
          $('#inputs').append($('&lt;input class="comment" name="name[]" /&gt;'));
      });
  
  
      /* MODE 2
         Without [] or array name &lt;&lt;&lt;&lt; this one is working
         var numberIncr = 1;
  
          $("#addInput").on('click', function () {
             $('#inputs').append($('&lt;input class="comment" name="name' + numberIncr + '" /&gt;'));
             numberIncr++;
         });
      */
  
      $('form.commentForm').on('submit', function (event) {
  
          $('input.comment').each(function () {
              $(this).rules("add", {
                  required: true
              })
          });
  
          event.preventDefault();
  
          console.log($('form.commentForm').valid());
      })
  
      $('form.commentForm').validate();
  });
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;form class="commentForm"&gt;
      &lt;div id="inputs"&gt;&lt;/div&gt;
      &lt;input type="submit" /&gt; 
      &lt;span id="addInput"&gt;add element&lt;/span&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I create two modes inside them, the working one (dynamic input text without array name) and the not working one (dynamic input text with array name).</p>
  
  <p>I have been going though those solution but unfortunately no one of them worked:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/9996589/jquery-validate-add-rules-for-an-array-input">jquery validate add rules for an array input</a></li>
  <li><a href="https://stackoverflow.com/questions/13170006/jquery-validate-is-not-working-with-dynamic-content">jquery validate is not working with dynamic content</a></li>
  <li><a href="https://stackoverflow.com/questions/14943121/jquery-validate-dynamic-input-array">jQuery validate dynamic input array</a></li>
  </ul>
  
  <p>Please help.</p>