jQuery Form Validation before Ajax submit
You could use the submitHandler
option. Basically put the $.ajax
call inside this handler, i.e. invert it with the validation setup logic.
$('#form').validate({
... your validation rules come here,
submitHandler: function(form) {
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
success: function(response) {
$('#answers').html(response);
}
});
}
});
The jQuery.validate
plugin will invoke the submit handler if the validation has passed.
first you don't need to add the classRules
explicitly since required
is automatically detected by the jquery.validate plugin.
so you can use this code :
- on form submit , you prevent the default behavior
- if the form is Invalid stop the execution.
- else if valid send the ajax request.
$('#form').submit(function (e) {
e.preventDefault();
var $form = $(this);
// check if the input is valid using a 'valid' property
if (!$form.valid) return false;
$.ajax({
type: 'POST',
url: 'add.php',
data: $('#form').serialize(),
success: function (response) {
$('#answers').html(response);
},
});
});
You can try doing:
if($("#form").validate()) {
return true;
} else {
return false;
}