title: Instantly display a modal when the form is submitted (before validation)
body: <p>I'm using a bootstrap validator from (<a href="https://github.com/1000hz/bootstrap-validator/blob/master/js/validator.js" rel="nofollow">https://github.com/1000hz/bootstrap-validator/blob/master/js/validator.js</a>) and I'm trying to instantly display a modal 'loading' box when the submit button is pressed on a form. I've achieved this by doing the following:</p>
  
  <pre><code>$('form').on('submit', function (event) {
      showLoadingModal();
      if (!event.isDefaultPrevented()) {
          event.preventDefault();
          submitForm(this);
      } else {
          hideLoadingModal();
      }
  });
  </code></pre>
  
  <p>However I'm getting a problem where there is a small gap of time (under a second) between clicking the button and the modal being displayed. I'm assuming this delay is caused by the time taken validating all the fields on the form of which there are quite a lot.</p>
  
  <p>This therefore leads me to believe that the validator 'form submit' is being executed before my code and I should be doing something different to call the showLoadingModal()</p>
  
  <p>Edit:</p>
  
  <p>I've added some logging into the js to work out what happens and when.  I've also moved the showLoadingModal() into a 'button clicked' event to ensure it happens before form submit.  Here's the order my messages get displayed:</p>
  
  <p>button clicked<br>
  before show modal<br>
  after show modal<br>
  form submitted<br>
  about to validate<br>
  &lt;--Modal appears now--></p>