jquery Plugins/Validation using submitHandler - asp.net

Question

Greeting,
I'm using jquery Plugins/Validation library. I want to allow validation on submitting but I'm not sure where I should insert the code:
I know that I can user submitHandler for that but after reading the document I had hard time to implement it so I need your help guys.
jquery validation is working ok but the problem that the form still submitted even there are invalid inputs.
here is my validation function and I want to know how can I make it to not submit the form if there is invalid input.
by the way, I'm using asp.net button for submitting the form.
here is my code:
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
"<%=txtHomePhone.UniqueID %>": {
phonehome: true
},
"<%=txtMobileHome.UniqueID %>": {
mobilephone: true
},
"<%=txtFaxHome.UniqueID %>": {
faxhome: true
},
"<%=txtEmailHome.UniqueID %>": {
email: true
},
"<%=txtZipCodeHome.UniqueID %>": {
ziphome: true
},
//work
"<%=txtPhonework.UniqueID %>": {
phonework: true
},
"<%=txtMobileWork.UniqueID %>": {
mobilework: true
},
"<%=txtFaxWork.UniqueID %>": {
faxwork: true
},
"<%=txtEmailWork.UniqueID %>": {
email: true
},
"<%=txtWebSite.UniqueID %>": {
url: true
},
"<%=txtZipWork.UniqueID %>": {
zipwork: true
}
},
errorElement: "mydiv",
wrapper: "mydiv", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2));
}
});

Answer 1

to enable debugon submit I need to set debug to true in validate function for the rules by adding this line : debug: true,
correct code:
$(document).ready(function() {
$("#aspnetForm").validate({
debug: true,
rules: {
"<%=txtHomePhone.UniqueID %>": {
phonehome: true
},
"<%=txtMobileHome.UniqueID %>": {
mobilephone: true
},
"<%=txtFaxHome.UniqueID %>": {
faxhome: true
},
"<%=txtEmailHome.UniqueID %>": {
email: true
},
"<%=txtZipCodeHome.UniqueID %>": {
ziphome: true
},
//work
"<%=txtPhonework.UniqueID %>": {
phonework: true
},
"<%=txtMobileWork.UniqueID %>": {
mobilework: true
},
"<%=txtFaxWork.UniqueID %>": {
faxwork: true
},
"<%=txtEmailWork.UniqueID %>": {
email: true
},
"<%=txtWebSite.UniqueID %>": {
url: true
},
"<%=txtZipWork.UniqueID %>": {
zipwork: true
}
},
errorElement: "mydiv",
wrapper: "mydiv", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top - (element.height() / 2));
}
});