提交表单后立即显示模式（验证之前）

Question

I'm using a bootstrap validator from ( https://github.com/1000hz/bootstrap-validator/blob/master/js/validator.js ) 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:

$('form').on('submit', function (event) {
    showLoadingModal();
    if (!event.isDefaultPrevented()) {
        event.preventDefault();
        submitForm(this);
    } else {
        hideLoadingModal();
    }
});

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.

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()

Edit:

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:

button clicked
before show modal
after show modal
form submitted
about to validate
<--Modal appears now-->

Answer 1

set a delay of 300ms before submitting your form

var event;
var formobj;
('form').on('submit', function (event) {
showLoadingModal();
event = event; //save event to be used later 
formobj = this;
setTimeout(function() 
{
     if (!event.isDefaultPrevented()) {
        event.preventDefault();
        submitForm(formobj );
      } else {
          hideLoadingModal();
      }
},300);
return false; //Prevent normal submission of the form so that the dialog box is visible
});

I am assuming submitForm(this) is the function that does the form posting causing the page to reload

Just a thought, hope it helps!