title: Jquery validate messages on Twitter Bootstrap modal?
body: <p>I have input on which serves to me as date input. I've made validation in which jquery validate checks if date is valid format and if the numbering is correct also... you can test it out on click of update button. </p>
  
  <p>My idea is to show those validation error messages inside of twitter bootstrap modal. So when the user tries to update for example a empty field, or wrong formatted date, he gets modal with corresponding message.</p>
  
  <p>I've made a example modal which you can fire with button 'modal example'</p>
  
  <p>you can see situation and edit it here: <a href="http://jsfiddle.net/dzorz/tdpkY/" rel="nofollow">http://jsfiddle.net/dzorz/tdpkY/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;form id="date" action="#" method="post"&gt;
  &lt;div&gt;
      &lt;label for="datetime"&gt;yyyy-mm-dd&lt;input type="text" name="datetime" id="datetime" /&gt;&lt;/label&gt;
      &lt;button type="submit" name="submit" id="submit" class="btn btn-primary" /&gt;Update&lt;/button&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  
  
  &lt;button class="btn btn-small btn-primary" type="button" data-toggle="modal" href="#errorModal"  &gt;modal example&lt;/button&gt;
  
  
  &lt;!-- Modal --&gt;
  &lt;div id="errorModal" class="modal hide fade" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-header"&gt;
   &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
  &lt;h3 id="myModalLabel"&gt;Date format error!&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
  &lt;p&gt;Errors should appear here!&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
  &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>$('#date').submit(function(e) {
  e.preventDefault();
  if ($('#errors').length) {
      $('#errors').remove();
  }
  var datetime = $('#datetime').val();
  var errors = '';
  if (!/^\d{4}\-\d{2}\-\d{2}$/.test(datetime)) {
      errors += '&lt;span class="error"&gt;Not a valid date format&lt;/span&gt;';
  } else {
  
      var parts = datetime.split('-');
      var day = parts[2];
      var month = parts[1];
      var year = parts[0];
      var $day = (day.charAt(0) == '0') ? day.charAt(1) : day;
      var $month = (month.charAt(0) == '0') ? month.charAt(1) : month;
  
      if ($day &gt; 31 || $day &lt; 1) {
          errors += '&lt;span class="error"&gt;Not a valid day&lt;/span&gt;';
      }
  
      if ($month &gt; 12 || $month &lt; 1) {
          errors += '&lt;span class="error"&gt;Not a valid month&lt;/span&gt;';
      }
  
      var now = new Date();
      var currentYear = now.getFullYear();
  
      if (year &gt; currentYear || year &lt; (currentYear - 100)) {
          errors += '&lt;span class="error"&gt;Not a valid year&lt;/span&gt;';
      }
  
  
  }
  
  if (errors != '') {
      $('&lt;div id="errors"/&gt;').html(errors).appendTo('#date');
  } else {
  
      alert('Valid date');
  }
  
  
  
  
  
  });
  </code></pre>
  
  <p>Is something like that possible with just one modal? or I need one modal for each message? at the end is something like that even possible?</p>
  
  <p>Please help me, you can edit my jsfiddle freely</p>