Hi, my validation summary worked quite fine before I made a remote
username check available to it. The problem is when for the first time
an already existing username is entered into the username box, the
error div pops alright saying that the username already exists in the
db. however when I go back and correct it, the error message
disappears but the containing div still exists on the page. below is
the code, I hope somebody can help....
var container = $('#error_container');
// validate the form when it is submitted
var validator = $("#frmUserRegister").validate({
onkeyup: false,
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
meta: "validate",
rules: {
txtFullName: {
required: true,
rangelength:[3, 100]},
txtUsername: {
required: true,
rangelength:[5, 30],
remote:"ajaxCheckUsername.aspx"}, // returns 'true' or
'false' as string
txtEmail: {
required: true,
email: true},
txtPassword: {
required: true,
rangelength:[5, 20]},
txtConfirmPassword: {
equalTo: "#txtPassword"}
},
messages: {
txtFullName: {
required: "Please enter your <strong>full name</
strong>.",
rangelength: "Fullname must be <strong>between 3 and
100 characters</strong>"},
txtUsername: {
required: "Please enter a <strong>valid username</
strong>.",
rangelength: "Username must be <strong>between 5 and
30 characters</strong>.",
remote: jQuery.format("<strong><u>{0}</u> is already
taken</strong>, please choose a different username.")},
txtEmail: {
required: "please provide an <strong>email</strong>
address.",
email: "please provide a <strong>valid email</strong>
address"},
txtPassword: {
required: "please provide a <strong>password</
strong>",
rangelength: "Password must be <strong> between 6 and
20 characters</strong>"},
txtConfirmPassword: {
equalTo: "passwords <strong>must match</strong>."}
},
});
});
</script>
<style type="text/css">
#error_container
{
background-image:url(img/error.gif);
background-repeat:no-repeat;
background-color: #FFE8E8;
border: 1px solid #CC0000;
color: #CC0000;
font-family:Tahoma;
font-size:11px;
padding:4px 0 0 40px;
display: none;
}
#error_container ol li {
list-style-type:circle;
}
form.frmUserRegister label.frmUserRegister, label.error {
/* remove the next line when you have trouble in IE6 with labels in
list */
color: #CC0000;
}
</style>
</head>
<body>
<form id="frmUserRegister" runat="server">
<div id="error_container">
<strong>please review and correct the following errors:</strong>
<ol>
<li style="display:none;"></li>
</ol>
</div>
.... the rest of the page are the form fields...
here, the div with the id of "error_container" is still being
displayed...
