javascript - jQuery/AJAX Submit after Validation -

i have form submitted via post request on server calls third party api. api can bit slow (5-8 seconds). not want users submit twice and/or wonder happening form submission. idea show spinning wheel until next page loaded (and api request sent server).

the following code shows spinning wheel when button pressed, doesn't care form entered correctly or not. if fields blank, form not submitted, spinning wheel shows.

i have form validated , checked make sure fields entered correctly following code

$(document).ready(function() {   $('#ccform').bootstrapvalidator({   // use feedback icons, ensure 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 , cannot empty'           }         }       },       lname: {         validators: {           notempty: {             message: 'your name required , cannot empty'           }         }       },       baddr1: {         validators: {           notempty: {             message: 'your name required , cannot empty'           }         }       },        package: {         validators: {           notempty: {             message: 'must pick package'           }         }       },       bcity: {         validators: {           notempty: {             message: 'must enter city'           }         }       },       bcountry: {         validators: {           notempty: {             message: 'must select country'           }         }       },       bstate: {         validators: {           notempty: {             message: 'must select state'           }         }       },       ccnum: {         validators: {           creditcard: {             message: 'the credit card number not valid'           },           notempty: {             message: 'must enter card number'           }         }          },       ccmo: {         validators: {           stringlength: {             min: 2,             max: 2,             message: 'two digits'           },           digits: {             message: 'the value not integer'           },           notempty: {             message: 'must enter exp month'           }         }          },       ccyr: {         validators: {           stringlength: {             min: 2,             max: 2,             message: 'two digits'           },           digits: {             message: 'the value not integer'           },           notempty: {             message: 'must enter exp year'           }         }          },       cvv2: {         validators: {           cvv: {             creditcardfield: 'ccnum',             message: 'the cvv number not valid'           },           notempty: {             message: 'must enter cvv'           }         }       },       bzip1: {         validators: {             zipcode: {               country: 'bcountry',               message: 'the value not valid %s'             },             notempty: {               message: 'must enter zip'             }           }       }     }   }) 

the following 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 spinning wheel:

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

i need code not submit/show spinning wheel until form validated properly.

i'm open better methods of accomplishing task. because understand code doesn't "listen" response request.

thanks in advance.

bootstrap validator has event fired when form valid: success.form.bv

so try like:

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

as additional note, if have included jquery might use jquery selectors , functions on getelementbyid