Below is my code, I am needing to get to where the label name will match the behavior that my field currently does. If nothing is entered the field is changed to a red background. If it is focused it goes back to white. I am needing the font color of the label to match color of the field and match the same behavior.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab06 - Form Validation</title>
<script type="text/javascript" charset="utf-8">
function passcheck(){
var pw1 = document.forms[ 0 ].password.value;
var pw2 = document.forms[ 0 ].passcomf.value;
if ( pw1 != pw2 ) {
alert ("You did not enter the same new password twice. Please re-enter your password.");
return false;
}else{
return true;
}
}
function validate( ) {
var errors = new Array( );
for( var i = 0; i < document.forms[ 0 ].elements.length ; i++ ){
if( document.forms[ 0 ].elements[ i ].type == "text" ) {
if( document.forms[ 0 ].elements[ i ].value == "" ){
errors.push( "The " + document.forms[ 0 ].elements[ i ].name + " field cannot be blank.\n");
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
if( document.forms[ 0 ].elements[ i ].type == "select-one") {
if(document.forms[ 0 ].elements[ i ].selectedIndex == 0 ) {
errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
if( document.forms[ 0 ].elements[ i ].type == "select-one") {
if(document.forms[ 0 ].elements[ i ].selectedIndex == 2 ) {
errors.push( "The " + document.forms[ 0 ].elements[ i ].name + ' was not "Yes, I agree!", you must agree to the "User Agreement."\n');
document.forms[ 0 ].elements[ i ].className = "in_error";
}
}
}
if( errors.length == 0 ) {
return true;
} else {
clear_errors( );
show_errors( errors );
return false;
}
}
function clear_errors( ){
var div = document.getElementById( "errors" );
while( div.hasChildNodes( ) ){
div.removeChild( div.firstChild );
}
}
function show_errors ( errors ) {
var div = document.getElementById( "errors" );
for( var i = 0; i < errors.length; i++ ){
var error = document.createTextNode( errors[ i ] );
var p = document.createElement( "p" );
p.appendChild( error );
div.appendChild( p );
}
}
window.onload = function( ) {
document.forms[ 0 ].onsubmit = validate;
}
</script>
<style type="text/css" media="screen">
#errors {
color: #F00;
}
.in_error {
background-color: #F00;
}
input:focus {
background-color: #FFF;
}
select:focus {
background-color: #FFF;
}
</style>
</head>
<body>
<h1>Form Validation</h1>
<div id="errors"></div>
<form action="" method="post" onsubmit="return passcheck()">
<p>
<label for="firstname" id="labelfirstname">First name:</label>
<input type="text" name="First name" value="" id="firstname" />
</p>
<p>
<label for="lastname" id="labellastname">Last name:</label>
<input type="text" name="Last name" value="" id="lastname"/>
</p>
<p>
<label for="middlei" id="labelmiddlei">Middle initial:</label>
<input type="text" name="Middle initial" value="" id="middlei"/>
</p>
<p>
<label for="address" id="labeladdress">Street address:</label>
<input type="text" name="Street address" value="" id="address"/>
</p>
<p>
<label for="city" id="labelcity">City:</label>
<input type="text" name="City" value="" id="city"/>
</p>
<p>
<label for="State" id="labelstate">State:</label>
<input type="text" name="State" value="" id="state"/>
</p>
<p>
<label for="zipcode" id="idzipcode">Zipcode:</label>
<input type="text" name="Zipcode" value="" id="zipcode"/>
</p>
<p>
<label for="username" id="labelusername">Username:</label>
<input type="text" name="Username" value="" id="username"/>
</p>
<p>
<label for="password" id="labelpassword">Password:</label>
<input type="text" name="Password" value="" id="password"/>
</p>
<p>
<label for="passcomf" id="labelpasscomf">Password comfirmation:</label>
<input type="text" name="Password comfirmation" value="" id="passcomf"/>
</p>
<p>
<label for="agreement" id="labelagreement">User Agreement</label>
<select name="User Agreement" id="agreement">
<option></option>
<option>Yes, I agree!</option>
<option>No, I do not agree!</option>
</select>
</p>
<p><input type="submit" value="Register →" onclick="return passcheck(); return true;"/></p>
</form>
</body>
</html>