$("form#contactUs").validate({ ignore: ":hidden", rules: { contactName: { required: true }, contactEmail: { required: true }, contactMessage: { required: true } }, submitHandler: function (form) { Swal.fire({ title: 'Sending Your Message', text: 'Please Wait', allowOutsideClick: false, allowEscapeKey: false, allowEnterKey: false, onOpen: () => { Swal.showLoading() } }) $.ajax({ url: "mail/send.php", method: "POST", data: $('form#contactUs').serialize(), success:function(msg) { if(msg == 'ok') { $('form#contactUs').trigger("reset"); $('form#contactUs').removeClass("was-validated"); grecaptcha.reset(); Swal.hideLoading() Swal.fire({ title: 'Thank You', text: 'Your message has been sent. We will respond shortly.', type: 'success', confirmButtonClass: 'btn btn-primary mt-2' }) } else if(msg == 'err') { Swal.hideLoading() Swal.fire({ title: 'Sorry, there\'s been a problem', text: 'We couldn\'t send your message, please try again or if this problem persists please call us.', type: 'error' }) } else if(msg == 'err2') { Swal.hideLoading() Swal.fire({ title: 'Oops! reCaptcha missing', text: 'Please complete the reCaptcha so we can make sure you are human.', type: 'error' }) } }, error:function(data) { Swal.hideLoading() Swal.fire({ title: 'We can\'t send the message yet.', text: 'Please make sure all fields are filled in and you have completed the reCaptcha to verify you aren\'t a robot.', type: 'warning' }) } }); return false; // required to block normal submit since you used ajax } });