I have adapted the MILK demo for a registration form and all works great

except for one little irritant.
If a form field is entered and Validator.rules accepts it as valid, the form field displays the checked image with no error message. If the content of a valid field is changed to an error condition, the error message is displayed but the image still shows "checked'. Obviously, if a previously valid field is changed to error, the "unchecked" image should be displayed with the error message.
I've searched the forums but can't find the answer and I can't figure out how to modify the code to resolve this display issue.
Here is all the code:
The Form:
- <form id="signupform" autocomplete="off" method="post" action="order.html">
<!-- ***************************************************************************************************** -->
<div id="signupbox">
<div id="signuptab">
<ul>
<li id="signupcurrent"><a href=" ">SIGN IN CREDENTIALS</a></li>
</ul>
</div>
<div id="signupwrap">
<table width="100%">
<tr>
<td class="label"><label id="lemail" for="email">Email Address*</label></td>
<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" tabindex="1" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lpassword" for="password">Password*</label></td>
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" tabindex="2" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password*</label></td>
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" tabindex="3" /></td>
<td class="status"> </td>
</tr>
</table>
</div>
</div>
<br/>
<!-- ***************************************************************************************************** -->
<div id="signupbox">
<div id="signuptab">
<ul>
<li id="signupcurrent"><a href=" ">ABOUT YOU</a></li>
</ul>
</div>
<div id="signupwrap">
<table width="100%">
<tr>
<td class="label"><label id="lfirstname" for="firstname">First Name*</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" tabindex="4" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="llastname" for="lastname">Last Name*</label></td>
<td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" tabindex="5" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lnickname" for="nickname">Nickname*</label></td>
<td class="field"><input id="nickname" name="nickname" type="text" value="" maxlength="50" tabindex="6" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lcompany" for="company">Company Name*</label></td>
<td class="field"><input id="company" name="company" type="text" value="" maxlength="100" tabindex="7" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lphone" for="phone">Primary Phone*</label></td>
<td class="field"><input id="phone" name="phone" type="text" value="" tabindex="8" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lstreet" for="street">Street Address*</label></td>
<td class="field"><input id="street" name="street" type="text" value="" maxlength="100" tabindex="9" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lstreet2" for="street2"> </label></td>
<td class="field"><input id="street2" name="street2" type="text" value="" maxlength="100" tabindex="10" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lcity" for="city">City*</label></td>
<td class="field"><input id="city" name="city" type="text" value="" maxlength="100" tabindex="11" /></td>
<td class="status"> </td>
</tr>
<tr>
<td class="label"><label id="lcountry" for="country">Country*</label></td>
<td class="field">
<select id="country" name="country" value="" tabindex="12" />
<option value="">Select ...</option>
<option value="CA">Canada</option>
<option value="US">United States</option>
</select>
</td>
<td class="status"> </td>
</tr>
<tr id="selectUS">
<td class="label"><label id="lstate" for="state">State*</label></td>
<td class="field">
<select id="state" name="state" value="" tabindex="13" />
<option value="">Select ...</option>
<option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="PR">Puerto Rico</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
</select>
</td>
<td class="status"> </td>
</tr>
<tr id="selectCA">
<td class="label"><label id="lprovince" for="province">Province/Territory*</label></td>
<td class="field">
<select id="province" name="province" value="" tabindex="14" />
<option value="">Select ...</option>
<option value="AB">Alberta</option><option value="BC">British Columbia</option><option value="MB">Manitoba</option><option value="NB">New Brunswick</option><option value="NL">Newfoundland/Labrador</option><option value="NT">Northwest Terrirtories</option><option value="NS">Nova Scotia</option><option value="NU">Nunavut</option><option value="ON">Ontario</option><option value="PE">Prince Edward Island</option><option value="QC">Quebec</option><option value="SK">Saskathchewan</option><option value="YU">Yukon</option>
</select>
</td>
<td class="status"> </td>
</tr>
<tr id="dzip">
<td class="label"><label id="lzip" for="zip">ZIP Code*</label></td>
<td class="field"><input id="zip" name="zip" type="text" size="7" value="" maxlength="5" tabindex="15" style="width: 50px;" /></td>
<td class="status"> </td>
</tr>
<tr id="dcazip">
<td class="label"><label id="lcazip1" for="cazip1">Postal Code*</label></td>
<td class="field"><input id="cazip1" name="cazip1" type="text" size="3" value="" maxlength="3" tabindex="16" style="width: 40px;" /> <input id="cazip2" name="cazip2" type="text" size="3" value="" maxlength="3" tabindex="17" style="width: 40px;" /></td>
<td class="status"> </td>
</tr>
</table>
</div>
</div>
<br/>
<!-- ***************************************************************************************************** -->
<div id="signupbox">
<div id="signuptab">
<ul>
<li id="signupcurrent"><a href=" ">AGREE TO LICENSE TERMS AND SUBMIT ORDER</a></li>
</ul>
</div>
<div id="signupwrap">
<table width="100%">
<tr>
<td class="label"><a href="license-agreement.html" title="Opens new tab or window" target="_blank">SmartPlan™ License</a></td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms" tabindex="18" />
<label class="label" id="lterms" for="terms">I have read and agree to the License Agreement</a><br/></label>
</div> <!-- /termswrap -->
</td>
</tr>
<tr>
<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="Go to Buy Now" tabindex="19" style="width: 130px;" />
</td>
</tr>
</table>
</div>
</div>
</form>
Validator Code:
- $(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({
rules: {
firstname: "required",
lastname: "required",
company: "required",
street: "required",
city: "required",
country: "required",
state: {
required: function(element) {
return $("#country").val() == 'US';
}
},
province: {
required: function(element) {
return $("#country").val() == 'CA';
}
},
zip: {
required: function(element) {
return $("#country").val() == 'US';
},
rangelength: [5,5],
remote: "zip-us.php"
},
cazip1: {
required: function(element) {
return $("#country").val() == 'CA';
},
rangelength: [3,3],
remote: "zip-ca1.php"
},
cazip2: {
required: function(element) {
return $("#country").val() == 'CA';
},
rangelength: [3,3],
remote: "zip-ca2.php"
},
phone: {
required: true,
remote: "phone.php"
},
nickname: {
required: true,
minlength: 2,
remote: "users.php"
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
minlength: 8,
email: true,
remote: "emails.php"
},
terms: "required"
},
messages: {
firstname: "Enter your First Name",
lastname: "Enter your Last Name",
company: "Enter your Comapny Name",
street: "Enter your Street Address",
city: "Enter your City",
country: "Select your Country",
state: "Select your State",
province: "Select Province/Territory",
zip: {
required: "Enter your US/PR ZIP Code",
rangelength: "{0} numeric digits required",
remote: jQuery.format("{0} is an invalid ZIP Code")
},
cazip1: {
required: "Enter in 2 parts<br/>",
rangelength: "{0} alpha-numeric digits [ANA]<br/>",
remote: jQuery.format("{0} is an invalid code<br/>")
},
cazip2: {
required: "Enter in 2 parts<br/>",
rangelength: "{0} alpha-numeric digits [NAN]<br/>",
remote: jQuery.format("{0} is an invalid code")
},
phone: {
required: "Enter your Phone #",
remote: jQuery.format("Entry not complete, re-enter")
},
nickname: {
required: "Enter your nickname",
minlength: jQuery.format("{0} characters required"),
remote: jQuery.format("Nickname must be unique: {0} is already in use")
},
password: {
required: "Password is required",
minlength: jQuery.format("At least {0} characters required")
},
password_confirm: {
required: "Repeat your Password",
minlength: jQuery.format("At least {0} characters required"),
equalTo: "Password does not match"
},
email: {
required: "Email address is required",
minlength: "This email is too short",
email: jQuery.format("Not a valid email address"),
// remote: jQuery.validator.format("{0} is already registered")
remote: function() {
var emailvalue = $("#email").val();
url = 'http://smartplantools.com/register/order.html?email=' + emailvalue;
window.location.href = url;
}
},
terms: "You must agree to the License Agreement"
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else if ( element.is(":text") )
error.appendTo( element.parent().next() );
else
error.appendTo( element.parent().next() );
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
alert("submitted!");
},
// Use this one when ready
// submitHandler: function(form) {
// form.submit();
// },
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
$("input.#phone").mask("(999) 999-9999");
// $("input.zip").mask("99999");
// $("input.cazip").mask("*** ***");
/*
$("#email").blur(function() {
var emailvalue = $("#email").val();
url = 'http://smartplantools.com/register/order.html?email=' + emailvalue;
window.location.href = url;
});
*/
$("#country").blur(function() {
request = $("#country").val();
if (request == 'US') {
$("#selectUS").css("display","table-row");
$("#selectCA").css("display","none");
$("#dzip").css("display","table-row");
$("#dcazip").css("display","none");
}
else {
$("#selectUS").css("display","none");
$("#selectCA").css("display","table-row");
$("#dzip").css("display","none");
$("#dcazip").css("display","table-row");
}
$("#zip").valid();
$("#cazip1").valid();
$("#cazip2").valid();
});
// propose nickname by combining first and lastname
$("#nickname").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + " " + lastname;
}
});
});
$.fn.hoverClass = function(classname) {
return this.hover(function() {
$(this).addClass(classname);
}, function() {
$(this).removeClass(classname);
});
};
The CSS:
- /* GENERAL ELEMENTS */
* { margin: 0; padding: 0; }
body, label, input, select, textarea { font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; }
body { color: #333; background-color: #fff; text-align: center; }
a:link { color:#0060BF; text-decoration: underline; }
a:visited { color:#0060BF; text-decoration: underline; }
a:active { color:#0060BF; text-decoration: underline; }
a:hover { color:#000000; text-decoration: underline; }
img { border: 0px; }
/* p { font-size: 1.0em; line-height: 1.3em; margin: 1.2em 0em 1.2em 0em; } */
li > p { margin-top: 0.2em; }
pre { font-family: monospace; font-size: 1.0em; text-align: left; }
strong, b { font-weight: bold; }
option { padding-left: 10px; font-family: verdana, sans-serif; }
/* PAGE ELEMENTS */
/* Content */
label { font-weight: normal; }
#reminders label { font-weight: normal; }
#hdsubmit { width: 60px; }
table.tabbedtable { padding-left: 3em; }
table.tabbedtable td { padding-bottom: 5px; }
table.tabbedtable label { text-align: right; padding-right: 9px; }
.hiddenlabel { visibility: hidden; }
.largelink { border: 1px solid #cacaca; padding: 10px; background-color: #E8EEF7; font-size: 1.2em; font-weight: bold; }
.largelinkwrap { padding-top: 10px; padding-bottom: 10px; }
input { width: 165px; }
#signuptab {
float:left;
width:100%;
background:#fff url("bg.gif") repeat-x bottom;
font-size: 1.0em;
line-height: normal;
}
#signuptab ul {
margin:0;
padding: 0px 10px 0px 10px;
list-style:none;
}
#signuptab li {
float:left;
background:url("left_white.png") no-repeat left top;
margin:0;
padding:0 3px 0 9px;
border-bottom:1px solid #CACACA;
}
#signuptab a {
float:left;
display:block;
width:.1em;
background:url("right_white.png") no-repeat right top;
padding:2px 15px 0px 6px;
text-decoration:none;
font-weight:normal;
color:#fff;
white-space: nowrap;
}
#signuptab > ul a {width:auto;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#signuptab a {float:none;}
/* End IE5-Mac hack */
#signuptab a:hover {
color:#333;
}
#signuptab #signupcurrent {
background-position:0 -150px;
border-width:0;
}
#signuptab #signupcurrent a {
background-position:100% -150px;
padding-bottom:1px;
color:#000;
}
#signuptab li:hover, #signuptab li:hover a {
background-position:0% -150px;
color:#000;
}
#signuptab li:hover a {
background-position:100% -150px;
}
/* Signup box */
#signupbox {
width: 100%;
text-align: center;
margin: 0em auto;
}
#signupwrap {
border: 1px solid #CACACA;
border-top: 0;
text-align: left;
padding: 15px 0px 15px 0px;
clear: both;
}
/* Unsupported browsers */
.orange_rbcontent { padding: 0.4em; }
.orange_rbroundbox { width: 100%; }
#unsupported {
font-weight: bold;
text-align: left;
}
/*#content {
padding-top: 15px;
}*/
/* Signup form */
#signupform table {
border-spacing: 0px;
border-collapse: collapse;
empty-cells: show;
width: 570px;
}
#signupform tr#selectUS { display: none; }
#signupform tr#selectCA { display: none; }
#signupform tr#dzip { display: none; }
#signupform tr#dcazip { display: none; }
#signupform td.label {
padding-top: 2px;
padding-right: 8px;
vertical-align: top;
text-align: right;
width: 160px;
white-space: nowrap;
}
#signupform td.field {
padding-bottom: 10px;
vertical-align: top;
white-space: nowrap;
width: 170px;
}
#signupform td.status {
padding-top: 2px;
padding-left: 8px;
vertical-align: top;
width: 240px;
font-size: 11px !important;
/* white-space: nowrap; */
}
#signupform .textfield {
width: 170px;
}
#signupform label.error {
background:url("images/unchecked.png") no-repeat 0px 0px;
padding-left: 21px;
padding-bottom: 3px;
font-weight: normal;
color: #990000;
font-size: 11px !important;
}
#signupform label.checked {
background:url("images/checked.png") no-repeat 0px 0px;
padding-left: 21px;
padding-bottom: 3px;
font-weight: normal;
color: #990000;
font-size: 11px !important;
}
#signupform #lterms label.error {
background:url("images/unchecked.png") no-repeat 0px 0px;
padding-left: 21px;
padding-bottom: 3px;
margin-left: 5px;
font-weight: normal;
color: #990000;
}
#signupform #lterms label.checked {
background:url("images/checked.png") no-repeat 0px 0px;
}
#signupform .success_msg {
font-weight: bold;
color: #0060BF;
margin-left: 19px;
}
#signupform #dateformatStatus, #signupform #termsStatus {
margin-left: 6px;
}
#signupform #dateformat_eu {
vertical-align: middle;
}
#signupform #ldateformat_eu {
font-weight: normal;
vertical-align: middle;
}
#signupform #dateformat_am {
vertical-align: middle;
}
#signupform #ldateformat_am {
font-weight: normal;
vertical-align: middle;
}
#signupform #termswrap {
float: left;
width: 410px;
}
#signupform #terms {
vertical-align: middle;
float: left;
display: block;
margin-right: 5px;
margin-top: 3px !important;
width: 20px;
}
#signupform #lterms {
font-weight: normal;
vertical-align: top;
float: left;
display: block;
white-space: normal;
}
#signupform #lsignupsubmit {
visibility: hidden;
}
Example of display, Entered 55555 for Zip code and then went back and changed it to 555AA which generates the error message but image did not change back to "unchecked".

Also, this code does not work in IE7. Works with IE8, Firefox and Google Chrome.
- $("#country").blur(function() {
request = $("#country").val();
if (request == 'US') {
$("#selectUS").css("display","table-row");
$("#selectCA").css("display","none");
$("#dzip").css("display","table-row");
$("#dcazip").css("display","none");
}
else {
$("#selectUS").css("display","none");
$("#selectCA").css("display","table-row");
$("#dzip").css("display","none");
$("#dcazip").css("display","table-row");
}
$("#zip").valid();
$("#cazip1").valid();
$("#cazip2").valid();
});
Any help is appreciated!