title: Form validation with jQuery Validate plugin
body: <p>after a long research on internet i'm about to give up, let's say you are my last hope. My problem: I'm implementing a timesheet form for my company. This form is dynamic because in a day you can do several activities. The fields (included in a PHP page) are:</p>
  
  <ul>
  <li>Day (text field)</li>
  <li>Hours (drop down)</li>
  <li>Notes (a text field where the employee can write notes for the day)</li>
  </ul>
  
  <p>All the fields listed are in a row enclosed in a fieldset. On the top of field set i've put a button, clicking it I will add another row with the data listed before. Now, before submitting to backend, I want, of course, put some validation rules which are the following:</p>
  
  <ul>
  <li>Field DAY must be required (it's my key in DB and i've added a DatePicker plugin)</li>
  <li>The sum of hours in an entire day can't exceed the 8 hours</li>
  </ul>
  
  <p>I've tried to use Jquery Validate but seems I have two problems:</p>
  
  <ul>
  <li>It can't handle in somehow the arrays of data going to the script php that will write down on DB (for example the days submitted will arrive to backend in an array, I've decided this way because the number of days that can be recorded is not known before submission)</li>
  <li>It adds the controls only on first row</li>
  </ul>
  
  <p>I've tried (as I've read in other posts) to add rules after the creation of new row, but, in that case, it works on other fields only if i put the cursor inside, I leave the field blank and then I click outside that field.</p>
  
  <p>I attach my code, any help would be appreciated!!</p>
  
  <p>greetings from Italy.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
      var i = 0;
  
      //fadeout selected item and remove
      $('.remove').live('click', function() {
          $(this).parent().fadeOut(300, function(){ 
          $(this).empty();
          return false;
          });
      });
  
  
      $('a#add').click(function() {
          i++;
          var options = '&lt;p&gt;Day    &lt;input type="text" id = "Day'+i+'" class = "Day" name="day[]"&gt;  &lt;/select&gt;  hours&lt;select id = "hours'+i+'" class = "hours" name="hours[]"&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;option value="6"&gt;6&lt;/option&gt;&lt;option value="7"&gt;7&lt;/option&gt;&lt;option value="8"&gt;8&lt;/option&gt;&lt;/select&gt;   Notes    &lt;input type="text" id="Note'+i+'" class = "Note" name="note[]"&gt;&lt;a href="#" class="remove"&gt;&lt;img src="images\\remove.png" height="20" width="20"&gt;&lt;/img&gt;&lt;/a&gt;&lt;/p&gt;';
          $(options).fadeIn("slow").appendTo('#extender');
  
  
      });
  
      $('.Day').live('click', function() {
      $(this).datepicker('destroy').datepicker({
          changeMonth: false,
          changeYear:  false,
          stepMonths:  false,
          dateFormat: "dd-mm-yy",
          showOn:'focus'}).focus();
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>this is where the dynamic fields are appended</p>
  
  <pre><code>&lt;form name="rec_abs" method="post" action = "rec_on_db.php"&gt;
  
  &lt;fieldset&gt;
  &lt;legend&gt;Timesheet&lt;/legend&gt;
  &lt;div id="extender"&gt;&lt;/div&gt;
  &lt;p&gt;&lt;a href="#" id="add"&gt;&lt;img src="images\add.png" alt="" border=3 height=20 width=20&gt;&lt;/img&gt;&lt;/a&gt;    &lt;/p&gt;
  &lt;/fieldset&gt;
  
  &lt;/form&gt;
  &lt;input type="submit" value="Send your timesheet"&gt;&lt;/input&gt;&lt;br&gt;
  </code></pre>