I've researched this, and I've seen suggestions about setting a time out... that works half way... it seems to be walking a thin line by setting a random time on it... and then, it somehow is interfering with error messaging that appears on page reload if the credit card form was not filled out correctly... and there are no errors in console either.

So I tried the timeout method like the following:

setTimeout(function() {
    form.submit();
}, 100);

And then someone suggested using "onBlock", which gives me the same results as using the timeout.

Here is my code using the timeout:

<script id="globalPaymentPageData" type="text/javascript">

   $(function() {
      $("form[id*='creditCardForm']").validate({
          debug: false,
          errorClass: "errorMessage",
          errorElement: "span",
                  // trigger blockUI after form validation has taken place and form is valid
                  submitHandler: function(form) {
                      $.blockUI.defaults.css = {};
                      $.blockUI({
                          message: '<img src="/images/store/ajax-loader.gif" class="checkout-ajaxLoaderImage" width="160" height="24" /><p class="checkout-pleaseWait">Please wait &mdash; your order is being submitted.</p>',
                          centerX: true,
                          centerY: true,
                      });
                      setTimeout(function() {
                          form.submit();
                      }, 100);
                  }
      });
   });
</script>

Any help would be *greatly* appreciated, as I've run out of thoughts... I've tried quite a few different options.

Thanks very much!