Ajax submit issue, not returning an error
With the following code, the form validates and when successfully submitted displays the success div, but when I set a required form element to false, and have it on the server side as being required it still returns the success msg.
brief example (any other suggestions are more than welcome)
$(document).ready(function() {
//support form
$.validator.methods.equal = function(value, element, param) {
return value == param;
};
var validator = $("#request").bind("invalid-form.validate", function() {
$("#summary").html("Your form contains " + validator.numberOfInvalids() + " error(s), please fix.");
}).validate({
errorElement: "em",
errorContainer: $("#summary"),
errorPlacement: function(error, element) {
error.appendTo( element.parent("li"));
},
success: function(label) {
label.text("ok!").addClass("success");
},
submitHandler: function(form) {
var dataString = $(form).serialize();
$.ajax({
type: $(form).attr('method'),
url: form.action,
data: dataString,
clearForm: true,
success: function(data, status) {
//-----> this always happens
$("#request").remove();
$("#STY").fadeIn("slow");
clearForm:true;
},
//-------> even when i remove a required element this never shows
error: function (data, status) {
$("#request").remove();
$("#SE").fadeIn("slow");
}
});
return false;
},
rules: {
hs_customer_firstname: {
required: true,
minlength: 2
},
hs_customer_lastname: {
required: true,
minlength: 2
}
//etc
},
messages: {
hs_customer_firstname: {
required: "Please Enter Your First Name",
minlength: "Your First Name Must be at Least 2 Characters"
}
//etc
}
});
});
</script>
hope someone can help!