Response title
This is preview!
Validator: Checked and Unchecked images in MILK DEMO
in Using jQuery Plugins
•
10 years ago
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:
Validator Code:
The CSS:
Also, this code does not work in IE7. Works with IE8, Firefox and Google Chrome.
Any help is appreciated!
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;
}
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!
1