title: Input validation on a dynamically created table/form question
body: <p>How do I change this so that the validation is working well with the dynamically created rows too?</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
      &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" 
          src="jquery-validation-1.8.1/jquery.validate.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $( document ).ready( function() {
              $( "Form" ).validate();
          } );
          function add_row() {
              var data = {
                  menge : { class : 'required' },
                  bezeichnung : { class : 'required' },
                  euro_stueck : { class : 'required' }
              };
              var table = document.getElementById( 'product' );
              var rows = table.getElementsByTagName( 'tr' ).length;
              var tr = table.insertRow( rows );
              tr.id = 'tr_' + rows;
              for ( var name in data ) {
                  if ( data.hasOwnProperty( name ) ) {
                      var td = document.createElement( 'td' );
                      var input = document.createElement( 'input' );
                      for ( var attr in data[name] ) {
                          if ( data[name].hasOwnProperty( attr ) ) { 
                              input[attr] = data[name][attr];
                          }
                      }
                      input.name = name + '_' + rows;
                      td.appendChild( input );
                      tr.appendChild( td );
                  }
              }
              window.scrollTo( 0, document.body.scrollHeight );
  //          $( "Form" ).validate();
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form action=""&gt;
      &lt;table id="product"&gt;
          &lt;tr id="tr_0"&gt;&lt;th&gt;Menge&lt;/th&gt;&lt;th&gt;Ware&lt;/th&gt;&lt;th&gt;Euro/Stück&lt;/th&gt;&lt;/tr&gt;
          &lt;tr id="tr_1"&gt;
              &lt;td&gt;&lt;input name="menge_1" class="required" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input name="bezeichnung_1" class="required" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input name="euro_stueck_1" class="required" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;br /&gt;
      &lt;input type="button" value="Hinzufügen" onclick="add_row()" /&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;input type="submit" value="OK"/&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>