I'm using jQuery validation on a form and the form is using a submitHandler to call a dialog window for verification of the form data. I've got a bunch of rules and messages set up for the fields for the validation. I would like to display an alert window when the user clicks the submit button and the form doesn't validate. The reason is my messages are all displayed at the top of the form and since the form has to be scrolled, users may not see the messages. (And we're dealing with some users that may not think about scrolling). So I'd like an alert window to display to let them know there are errors on the form. Here is my javascript for the validation:
function initFormValidation() {
$("#account").validate({
errorContainer: "#errorlist",
errorLabelContainer: "#errorlist",
wrapper: "li",
rules: {
firstname: {
required: true,
minlength: 1,
maxlength: 50
},
lastname: {
required: true,
minlength: 1,
maxlength: 50
}
},
messages: {
firstname: {
required: "A first name is required in the Authorized Agent & Legal Status section.",
minlength: "A first name is required in the Authorized Agent & Legal Status section.",
maxlength: "You have exceeded the 50 character length of the first name."
},
lastname: {
required: "A last name is required in the Authorized Agent & Legal Status section.",
minlength: "A last name is required in the Authorized Agent & Legal Status section.",
maxlength: "You have exceeded the 50 character length of the last name."
}
},
submitHandler: function() {
fillVerificationDialog();
$('#verification_dialog').dialog('open');
return false;
}
});
}
How would I add an alert to the initFormValidation() method to display a message if there are validation errors?