title: jQuery validation of a form inserted into DOM
body: <p>I have this markup on the page:</p>
  
  <pre><code> &lt;div data-bind="visible: found"&gt;
          &lt;div data-bind="with: eventDetails"&gt;
              &lt;!-- Some stuff --&gt;
          &lt;/div&gt;
          &lt;div style="clear: left"&gt;
              &lt;div id="newShow" title="Add a Show"&gt;&lt;/div&gt;
              &lt;a href="#" class="btn btn-primary" id="addShow" data-bind="click: addShow"&gt;Add a Show&lt;/a&gt; &lt;!-- this is bound to a knockout viewmodel which calls addShowDialog() function --&gt;
          &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This is the form which is loaded into <code>div#newShow</code></p>
  
  <pre><code>&lt;form action="/MyEvents/AddShow/events-385" id="addShowForm" method="post" novalidate="novalidate"&gt;    &lt;div&gt;
          &lt;div class="editor-label"&gt;
              &lt;label for="Name"&gt;Name&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value=""&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              &lt;label for="Date"&gt;Date&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line hasDatepicker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="Date" name="Date" type="datetime" value="10 January 2013"&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="Date" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              &lt;label for="ReportingTime"&gt;ReportingTime&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line hasDatepicker" data-val="true" data-val-date="The field ReportingTime must be a date." data-val-required="The ReportingTime field is required." id="ReportingTime" name="ReportingTime" type="datetime" value="03:26 p.m."&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="ReportingTime" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              &lt;label for="JudgingStarts"&gt;JudgingStarts&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line hasDatepicker" data-val="true" data-val-date="The field JudgingStarts must be a date." data-val-required="The JudgingStarts field is required." id="JudgingStarts" name="JudgingStarts" type="datetime" value="03:26 p.m."&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="JudgingStarts" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the Javascript that inserts the form, and handles posting back from it:</p>
  
  <pre><code>function addShowDialog() {
          $.get('/myevents/addShow/' + eventId,
              null,
              function (data, textStatus, xhr) {
                  refreshTarget($('#newShow'), data);
                  $('#newShow').dialog('open');
              });
      };
  
  $('#newShow').dialog({
          autoOpen: false,
          modal: true,
          resizable: false,
          buttons: {
              "Create a Show": function () {
                  var form = $('#addShowForm');
                  var valid = form.valid(); //&lt;-- this always returns true!
                  if (valid) {
                      var formData = form.serialize();
                      formData = formData + '&amp;EventId=' + encodeURIComponent(eventId);
                      $.post(
                          form.attr('action'),
                          formData,
                          function(data) {
                              if (data == "Success") {
                                  $('#newShow').dialog("close");
                              }
                          }
                      );
                  }
              },
              "Cancel": function () {
                  $(this).dialog("close");
              }
          },
          close: function () {
              loadData();
          }
      });
  </code></pre>
  
  <p>I can't get the form in <code>div#newShow</code> to validate. The check <code>form.valid()</code> always returns true. My head (and eyeballs) are kinda swimming with the whole thing so I hope this makes sense.</p>
  
  <p>Any ideas please?</p>