[jQuery] validate
[jQuery] validate
I am having a problem getting the error container to clear out after I
have fixed invalid inputs. I am using the
invalidHandler option. When my form is invalid it shows a message of
the number of errors (taken from the sample code) and shows the
invalid messages. After I correct each error the corresponding message
goes away but I am still left with the message of the number of
errors.
Here is my setup. Can you tell me what might be wrong? Thanks
$("#aspnetForm").validate({
focusCleanup: true,
onfocusout: false,
onkeyup: false,
submitHandler: function(form) {
saveAnnouncement();
return false;
},
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted.'
: 'You missed ' + errors + ' fields. They have been
highlighted.';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
errorContainer: "div.error",
errorLabelContainer: "div.error div",
wrapper: "p",
rules: {
txtStartDate: {
required: true,
date: true,
isDate: true
},
txtEndDate: {
required: true,
date: true,
isDate: true,
endDateCheck: true
},
txtHeading: {
required: true
},
txtMessage: {
required: true
}
},
messages: {
txtStartDate: {
required: "* The start date is required.",
date: "* The start date is not a valid date format.",
isDate: "* The start date is not a valid date."
},
txtEndDate: {
required: "* The end date is required.",
date: "* The end date is not a valid date format.",
isDate: "* The end date is not a valid date.",
endDateCheck: "* The end date must be greater than or
equal to the start date."
},
txtHeading: {
required: "* The heading is required."
},
txtMessage: {
required: "* The message is required."
}
}
});