Below is my program that I have so far. I am having trouble trying to figure how to get my passcheck function to check and make sure what is entered into the password and password confirmation fields match before it submits the validate function giving an alert.
The other thing I need some help is getting the labels(ie. First Name) to match the behavior of the fields when nothing is entered changing to red and then when focusing the corresponding field go back to the original color.
<!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;
}
}
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 = passcheck;
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">
<p>
<label for="firstname">First name:</label>
<input type="text" name="First name" value="" id="firstname" />
</p>
<p>
<label for="lastname">Last name:</label>
<input type="text" name="Last name" value="" id="lastname"/>
</p>
<p>
<label for="middlei">Middle initial:</label>
<input type="text" name="Middle initial" value="" id="middlei"/>
</p>
<p>
<label for="address">Street address:</label>
<input type="text" name="Street address" value="" id="address"/>
</p>
<p>
<label for="city">City:</label>
<input type="text" name="City" value="" id="city"/>
</p>
<p>
<label for="State">State:</label>
<input type="text" name="State" value="" id="state"/>
</p>
<p>
<label for="zipcode">Zipcode:</label>
<input type="text" name="Zipcode" value="" id="zipcode"/>
</p>
<p>
<label for="username">Username:</label>
<input type="text" name="Username" value="" id="username"/>
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="Password" value="" id="password"/>
</p>
<p>
<label for="passcomf">Password comfirmation:</label>
<input type="text" name="Password comfirmation" value="" id="passcomf"/>
</p>
<p>
<label for="agreement">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 →" /></p>
</form>
</body>
</html>