title: How to correctly validate a modal form
body: <p>I can't seem to get validation to work on my bootstrap modal, I have struggled with several of the examples that I have encountered.</p>
  
  <p>What is the correct way to validate a bootstrap modal?</p>
  
  <p>My HTML:</p>
  
  <pre><code> &lt;div class="modal fade" id="addMyModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Add Stuff&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form class="form-control" role="form" id="newModalForm"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-md-3" for="email"&gt;A p Name:&lt;/label&gt;
                          &lt;div class="col-md-9"&gt;
                              &lt;input type="text" class="form-control required error" id="pName" name="pName" placeholder="Enter a p name" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-md-3" for="email"&gt;Action:&lt;/label&gt;
                          &lt;div class="col-md-9"&gt;
                              &lt;input type="text" class="form-control" id="action" placeholder="Enter and action"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-success" id="btnSaveIt"&gt;Save&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>$(function () {        
  
      $("#newModalForm").validate({
          rules: {
              pName: {
                  required: true,
                  minlength: 8
              },
              action: "required"
          },
          messages: {
              pName: {
                  required: "Please enter some data",
                  minlength: "Your data must be at least 8 characters"
              },
              action: "Please provide some data"
          }
      });
  });
  </code></pre>
  
  <p>Based upon my code nothing appears to happen when I click the save button on modal.  I am utilizing the jquery.validate.js script.</p>
  
  <p>Can someone point me in the right direction?</p>