jQuery .ajax()
can be used to submit data to the server without a page refresh, but it's not exclusive to the jQuery Validate plugin.
However, here are your two options using the jQuery Validate plugin.
Standard form submit using the default action
of the form
element (as you've done)...
$("#form-contact").validate({
submitHandler: function(form) {
$('.btn-validate-group:visible').hide();
$('.message-success').fadeIn(1000);
form.submit(); // standard submit of the default form action
}
});
To stay on same page, use .ajax()
in the submitHandler
callback...
$("#form-contact").validate({
submitHandler: function(form) {
$('.btn-validate-group:visible').hide();
$('.message-success').fadeIn(1000);
$.ajax({ // submit form using ajax
// your ajax options here
});
return false; // block default form action
}
});
See the jQuery .ajax()
documentation for the options.
This is your own jsFiddle, which shows everything is working. I cannot test the ajax
but the form is not refreshing the page as you claim.