.ajaxform not working inside the validation submitHandler? - ajax

Question

i use the jquery validation plugin to validate form before submit
in submitHandler i use ajax request to post the form with ajax
before i used .ajax to send the request but now the form have image and its so hard to
serialize the file element through the normal ajax request and because of this i used this plugin
http://www.malsup.com/jquery/form/
now after using the plugin the ajax request not working at it all don't know why
this the first example with the normal ajax call
$(document).ready(function(){
$("#categoryForm").validate({
submitHandler: function() {
$.ajax({
type:'POST',
url: 'actions/add-category.php',
data: $("#categoryForm").serialize(),
success: function(response) {
$('#status').html(response);
}
});
return false;
}
});
});
and this one after using the plugin
$(document).ready(function(){
$("#categoryForm").validate({
submitHandler: function() {
$('#categoryForm').ajaxForm(function() {
alert('the form was successfully processed');
});
return false;
}
});
});
second one is not working

Answer 1

Try to invert the functions:
jQuery('#form_id').ajaxForm({
beforeSubmit: function() {
jQuery("#form_id").validate({
rules: {
first_name: "required",
last_name: "required"
},
messages: {
first_name: "Required",
last_name: "Required"
}
});
return jQuery('#form_id').valid();
},
success: function(resp) {
jQuery('#resp').html(resp).fadeIn('fast');
}
});
Where #resp is the ID that will receive the HTML generated from the file your #form_id posted