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>
If you move your
labelelement after theinputelements, then position them by afloat(or some other means to get them right), then you could change your css to use the adjacent sibling selector to get your effect. Here is a test sample of css:Of course, the down side is the html is not in a logical order with the
labelfollowing theinput. Other than a javascript solution, I am not aware of a way to do it with pure css without reordering the elements.