Jquery Validate then .onsubmit function - html

Question

I am using Jquery validation in a form and also an Ajax function in a .on(submit) code.
The problem is even when the validation is wrong the .on(submit) function still runs.
Is there any type of "if validation success" code to add to the validation code to put the .on(submit) code in so it will only run when the form is correct and validated?
this is the .on(submit) function
$('#valform').on('submit', function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: "<?php echo MAXINBOUND_PLUGIN_URL ?>/php/localProxy.php",
data: $('#valform').serialize(),
success: function (response) {
alert('Great!');
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
});
and this is the validation code
$("#valform").validate({
invalidHandler: function(form, validator) {
success: function (response) {
var errors = validator.numberOfInvalids();
if (errors) {
$("#error-message").show().text("Please correct the required field(s)");
} else {
$("#error-message").hide();
}
},
messages: {
agree: {
required: ""
},
phone1: {
required: ""
},
address1: {
required: ""
},
},
rules: {
agree: {
required: true,
},
phone1: {
required: true,
phoneUS: true
},
Address1: {
required: true,
addr: true,
},
},
});

Answer 1

You can use submitHandler to do ajax calls. So it will call only after passing all validations.
$("#valform").validate({
submitHandler: function(form) {
//do ajax call
}
})

Answer 2

You can use the jquery valid() method to check if the submitted form is valid. Something like this...
if ($("#valform").valid()) {
// do your ajax stuff
}
Please note that valid() will work only when the validate() is called on the form prior to it.
Hope this helps!