title: How to check if a form in a modal is valid
body: <p>I have a bootstrap modal that has a form.  I use am using the jquery.validate library to perform the actual validation on the form. <br></p>
  
  <p>That part appears to be working correctly. <br>
  However my next step is to take the data from the form and submit to the DB.</p>
  
  <p>Is it better to do this client side or server side and how do I check in either scenario that the form was actually valid?</p>
  
  <p>My modal looks like:</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" 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;Create a new gizmo&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body form-horizontal"&gt;
                      &lt;form role="form" id="newGizmoForm"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label col-md-2" for="gizmoName"&gt;Gizmo Name:&lt;/label&gt;
                              &lt;div class="col-md-10"&gt;
                                  &lt;input type="text" class="form-control" id="gizmoName" name="gizmoName" placeholder="Enter gizmo name" required /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label col-md-2" for="action"&gt;Action:&lt;/label&gt;
                              &lt;div class="col-md-10"&gt;
                                  &lt;input type="text" class="form-control" id="action" placeholder="Enter action" required&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;                        
                          &lt;div class="form-group"&gt;
                              &lt;div class="pull-right"&gt;
                                  &lt;button type="submit" class="btn btn-success" id="btnSaveGizmoAdd" style="margin-right:10px"                               &gt;Save&lt;/button&gt;
                                  &lt;button type="button" class="btn btn-default" id="btnCloseGizmoAdd" data-dismiss="modal"&gt;Close&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;                    
                  &lt;/div&gt;                
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I tried server side but the Page.IsValid is always true.<br>
  I also tried client side but I get an error "JavaScript runtime error: Unable to get property 'form' of undefined or null reference".</p>
  
  <pre><code> $("#btnSaveGizmoAdd").on("click", function () {
          var vStatus = $("#newGizmoForm").valid();
  
          // Check if form validated.
            // If valid post data to client      
      });
  </code></pre>