title: Validate bootstrap modal fields on click of button
body: <p>I am using twitter bootstrap modal to get 'Start' and 'End' date for some course.</p>
  
  <pre><code>&lt;div id="save_course_modal" class="modal hide fade"&gt;
    &lt;div class="modal_header_class"&gt;
      &lt;h4&gt;Start Course&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;label class='selector_modal_label'&gt;Course&lt;/label&gt;
      &lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;
              &lt;p&gt;Start date: &lt;input type="text" id="start_date" size="30" /&gt;&lt;/p&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;p&gt;End date: &lt;input type="text" id="end_date" size="30" /&gt;&lt;/p&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer modal_footer_class"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button id='add_course' class="btn btn-primary" data-dismiss="modal" aria-hidden="true"&gt;Start&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My Use Case:</strong></p>
  
  <p>I want to validate two input fields with ids <strong>'start_date'</strong> and <strong>'end_date'</strong>.
  Since, it is not a form and hence couldn't use 'required' attribute.</p>
  
  <p><strong>I am thinking to use following:</strong></p>
  
  <ol>
  <li>Remove <strong>data-dismiss="modal" aria-hidden="true"</strong> from
  button with <strong>id='add_course'</strong>. </li>
  <li>Add <strong>onclick='validate_course_fields();'</strong> to above button.</li>
  <li>If validations are fine then hide modal through <strong>$('#save_course_modal').hide()</strong>;</li>
  </ol>
  
  <p>Any better solution is appreciated.</p>