title: Validate Form Before calling modal
body: <p>I have a form with a submit button and when the button is clicked it opens a confirm modal which is a Twitter Bootstrap modal. If the modals confirm button is clicked it will submit the for but the validation happens after the modal button is clicked instead of the form button. I am also using jQuery Validation</p>
  
  <p>I want to get the form to validate first, stop the submit throught, show the confirm modal, then if confirmed submit the form.</p>
  
  <p>I realise this may not be possible but I am at a loss how to do it.</p>
  
  <pre><code>&lt;form action="URL" method="POST" id="validation-form" class="confirm-form"&gt;
  
      &lt;label for="deletion_reason" class="col-xs-3 col-lg-4 control-label"&gt;Select One&lt;/label&gt;
  
      &lt;select data-placeholder="Select one..." data-rule-required="true"&gt;
          &lt;option&gt;&lt;/option&gt;
          &lt;option value="1"&gt;One&lt;/option&gt;
          &lt;option value="2"&gt;Two&lt;/option&gt;
          &lt;option value="3"&gt;Three&lt;/option&gt;
          &lt;option value="4"&gt;Four&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;button type="submit" class="btn btn-danger white-text modal-toggle" data-toggle="modal" data-target="#modal-dialog" data-modal-type="form-confirm" data-modal-title="Delete Transaction" data-modal-text="Are you sure you want to delete this transaction?"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Delete&lt;/button&gt;
      &lt;a href="http://localhost.testing/form-modals.html"&gt;&lt;button type="button" class="btn"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; Cancel&lt;/button&gt;&lt;/a&gt;
  
  &lt;/form&gt;
  
  $('.modal-toggle').click(function(e){
      // modal data assigned
      modalType = $(this).data('modal-type').toLowerCase();
      modalTitle = $(this).data('modal-title');
      modalText = $(this).data('modal-text');
  
      // check which buttons to output
      if(modalType == "confirm"){     
          modalUrl = $(this).data('modal-confirm-url');
          modalOptions = '&lt;a href="' + modalUrl + '" class="btn btn-primary showhouse-colour"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Yes&lt;/a&gt;&lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; No&lt;/button&gt;';
      }else if(modalType == "alert"){
          modalOptions = '&lt;button class="btn btn-primary showhouse-colour" data-dismiss="modal" aria-hidden="true"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Ok&lt;/button&gt;';
      }else if(modalType == 'form-confirm'){
          modalOptions = '&lt;button class="btn showhouse-colour white-text" data-dismiss="modal" id="confirm-form-yes"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Yes&lt;/button&gt;&lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;&lt;i class="icon-ban-circle"&gt;&lt;/i&gt; No&lt;/button&gt;';
      }
  
      // output modal footer buttons
      $('.modal-title').html(modalTitle);
      $('.modal-text').html(modalText);
      $('.modal-footer').html(modalOptions);
  
      // if form-confirm, submit it
      $('#confirm-form-yes').click(function(){
          $('.confirm-form').submit();
      });
  
  });
  </code></pre>