title: Only show modal after validation check and form has been submitted
body: <p>There are quite a few examples out there at the moment and i have not been able to get this to work. I am trying to load my modal only once my form has passed simple validation and has been submitted. Right now it just loads the modal when i click submit, even if it fails validation.<br><br>
  For example below, the checkbox is a required field, if i don't check it and click submit the validation error loads, but so does the modal.</p>
  
  <pre><code>&lt;form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)"&gt;
          &lt;input type="checkbox" name="vehicle" value="Bike" required&gt;I accept this&lt;br&gt;
          &lt;button type="submit" value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"&gt;Open Modal&lt;/button&gt;
          &lt;input type="submit" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><br></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;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I found an example online that uses Jquery and it works well, but it does not load a modal.</p>
  
  <pre><code>&lt;form method="post" action="" onsubmit="return muModal(this)"&gt;
  
      &lt;input type="checkbox" name="vehicle" value="Accept" required&gt;Accept&lt;br&gt;
  
      &lt;input type="submit" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><br></p>
  
  <pre><code>&lt;script&gt;
      function muModal(f)
      {
          var form=f,
              modal=$('&lt;div/&gt;', {
                  'id':'alert',
                  'html':'&lt;iframe src="http://test.com/preloader"&gt;&lt;/iframe&gt;'
              })
                  .dialog({
                      'modal':true,
                      'width':800,
                      'height':'auto',
                      'buttons': {
                          'OK': function() {
                              $(this).dialog( "close" );
                              // do something, maybe call form.submit();
                          }
                      }
                  });
          return false;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Please note that the form still needs to submit, i just want the modal to pop up while the submission is happening.</p>