AODfan 0 Newbie Poster

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 &rarr;" onclick="return passcheck(); return true;"/></p>
        </form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.