jQuery/AJAX Submit after Validation

Question

I have a form that is submitted via a POST request on my server that calls a third party API. This API can be a bit slow (5-8 seconds). I do not want users to submit twice and/or wonder what is happening with their form submission. So the idea was to show a spinning wheel until the next page is loaded (and API request is sent back to my server).

The following code shows the spinning wheel when the button is pressed, but it doesn't care it the form is entered correctly or not. So if all the fields are blank, the form is not submitted, but the spinning wheel shows.

I have a form that is validated and checked to make sure fields are entered correctly with the following code

$(document).ready(function() {
  $('#ccForm').bootstrapValidator({
  // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
  },
    fields: {
       fname: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },
      lname: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },
      baddr1: {
        validators: {
          notEmpty: {
            message: 'Your name required and cannot be empty'
          }
        }
      },

      package: {
        validators: {
          notEmpty: {
            message: 'Must Pick Package'
          }
        }
      },
      bcity: {
        validators: {
          notEmpty: {
            message: 'Must Enter a City'
          }
        }
      },
      bcountry: {
        validators: {
          notEmpty: {
            message: 'Must select a Country'
          }
        }
      },
      bstate: {
        validators: {
          notEmpty: {
            message: 'Must Select a State'
          }
        }
      },
      ccnum: {
        validators: {
          creditCard: {
            message: 'The credit card number is not valid'
          },
          notEmpty: {
            message: 'Must Enter a Card Number'
          }
        }   
      },
      ccmo: {
        validators: {
          stringLength: {
            min: 2,
            max: 2,
            message: 'Two Digits'
          },
          digits: {
            message: 'The value is not an integer'
          },
          notEmpty: {
            message: 'Must Enter a Exp Month'
          }
        }   
      },
      ccyr: {
        validators: {
          stringLength: {
            min: 2,
            max: 2,
            message: 'Two Digits'
          },
          digits: {
            message: 'The value is not an integer'
          },
          notEmpty: {
            message: 'Must Enter a Exp Year'
          }
        }   
      },
      cvv2: {
        validators: {
          cvv: {
            creditCardField: 'ccnum',
            message: 'The CVV number is not valid'
          },
          notEmpty: {
            message: 'Must Enter a CVV'
          }
        }
      },
      bzip1: {
        validators: {
            zipCode: {
              country: 'bcountry',
              message: 'The value is not valid %s'
            },
            notEmpty: {
              message: 'Must Enter a Zip'
            }
          }
      }
    }
  })

The following is for the spinning wheel

(function (d) {
d.getElementById('ccForm').onsubmit = function () {
d.getElementById('pay').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));

The HTML code for spinning wheel:

<div id='loading2' style='display:none;'>
  <i class='fa fa-spinner fa-spin fa-3x'></i>
</div>

I need code that does not submit/show spinning wheel until the form is validated properly.

I'm also open to better methods of accomplishing this task. Because from what I understand my code doesn't actually "listen" for a response from any request.

Thanks in advance.

Answer 1

Bootstrap validator has an event that is fired when the form is valid: success.form.bv

So you could try something like:

(function (d) {
    $('#ccForm').on('success.form.bv', function () {
        d.getElementById('pay').style.display = 'block';
        d.getElementById('loading2').style.display = 'block';
    });
});

As an additional note, if you have included jQuery already you might as well use jQuery selectors and functions over getElementById