JavaScript - Urgent Help With Form Validation

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script

<form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
      <table width="100%" border="0" cellspacing="5" cellpadding="0">
        <tr>
          <td width="54%" class="subHeader">Full Name* </td>
          <td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Company Name </td>
          <td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
        </tr>
        <tr>
          <td class="subHeader">Address</td>
          <td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
        </tr>
        <tr>
          <td class="subHeader">Postcode</td>
          <td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
        </tr>
        <tr>
          <td class="subHeader">Telephone Number* </td>
          <td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
        </tr>
        <tr>
          <td class="subHeader">Mobile Number </td>
          <td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
        </tr>
        <tr>
          <td height="25" class="subHeader">Email Address* </td>
          <td class="subHeader"><input name="Email" type="text" id="Email" /></td>
        </tr>
        <tr>
          <td height="30" class="subHeader">Status*</td>
          <td class="subHeader"><select name="StatusClass" id="StatusClass">
            <option selected="selected">Please Choose</option>
            <option>Architect</option>
            <option>Interior Designer</option>
            <option>Private Client</option>
            <option>Student</option>
            <option>Trade Enquiry</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="23" class="subHeader">Project*</td>
          <td class="subHeader"><select name="Project" size="1" id="Project">
            <option selected="selected">Please Choose</option>
            <option>Planning Stages</option>
            <option>New Build</option>
            <option>Refurbishment</option>
            <option>Barn Conversion</option>
            <option>No project - information only</option>
          </select>          </td>
        </tr>
        <tr>
          <td height="37" class="subHeader">How did you hear about us?*</td>
          <td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
            <option selected="selected">Please Choose</option>
            <option>Web Search</option>
            <option>Grand Designs</option>
            <option>Living Etc</option>
            <option>Home Building &amp; Renovation</option>
            <option>Architect</option>
            <option>Friend/Family</option>
            <option>Magazine/Editorial</option>
            <option>Newspaper Article</option>
            <option>Trade Show/Exhibition</option>
            <option>Other</option>
          </select></td>
        </tr>
        <tr>
          <td height="24" class="subHeader">Brochure Request </td>
          <td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
        </tr>
        <tr>
          <td class="subHeader">Message</td>
          <td class="subHeader"><span class="style4">
            <textarea name="Message" id="Message"></textarea>
          </span></td>
        </tr>
        <tr>
          <td class="subHeader">&nbsp;</td>
          <td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
        </tr>
        <tr>
          <td colspan="2" class="subHeader"><em>* Required fields</em></td>
        </tr>
      </table>
	  </form>

....
<script type="text/javascript">
	window.onload = function() {
		document.forms[0].username.focus();
	}
	function validate(form)
	{
		var form = document.getElementById("reg");
		var e = document.getElementById("error");
		e.style.background = "red";
		
		for(var i = 0; i < form.elements.length; i++)
		{
			var el = form.elements[i];
			if(el.type == "text" || el.type == "password")
			{
				if(el.value == "")
				{
					e.innerHTML = "Please fill in all fields!";
					el.style.border = "1px solid red";
					el.focus();
					return false;
				} else {
					el.style.border = "1px solid green";
					return false;
				}
			}
		}
		var un = form.username;
		un.value = un.value.replace(/^\s+|\s+$/g,"");
		if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
		{
			e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
			un.focus();
			return false;
		}
		var pw = form.password;
		pw.value = pw.value.replace(/^\s+|\s+$/g,"");
		if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
		{
			e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
			pw.focus();
			return false;
		}
		e.innerHTML = "You filled in all the fields, well done!";
		e.style.background = "green";
		return false;
	}
</script>
</head>

<body>
<div id="wrapper">
	<div id="header">
    	<h1>My Cool Website</h1>
    </div>
    <div id="content">
		<div class="padding">
       	  <h2>Registration</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
	    <div id="error"></div>
		<div><label for="username">Username</label></div>
    			<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
		<div><label for="password">Password</label></div>
    			<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
        <div><label for="c_password">Confirm Password</label></div>
                <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
        <div><label for="email">Email address</label></div>
                <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
        <div><label for="c_email">Confirm Email address</label></div>
                <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
        <div><label for="firstname">First name</label></div>
                <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
        <div><label for="surname">Surname</label></div>
                <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
        <div><label for="gender">Gender</label></div>
                <div>
                    <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
                    <div><input type="radio" name="gender" value="f" />Female</div>
                </div>
                <div><input type="submit" value="Register" name="submit" /></div>
          </form>
		</div>
    </div>
    <div id="footer">
    	<p>Copyright &copy; 2009 My Cool Website</p>
    </div>
</div>
</body>
</html>

$(function validateForm(){
		
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'email',
			'phone'  :  '(555) 123-4567',
			'other'  :  'other',
			'detail'  :  'project overview'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
    $('input#phone').inputfocus({ value: field_values['phone'] });
	$('input#other').inputfocus({ value: field_values['other'] });
	$('input#detail').inputfocus({ value: field_values['detail'] });

    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){  });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields1 = $('#first_step input[type=text]');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });        
        
        if(error <= 0) {   
                //update progress bar
                $('#progress_text').html('25% Complete');
                $('#progress').css('width','85px');
                
                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();                 
        } else 
			return false;
    });

	$('#back_second').click(function(){

                //update progress bar
                $('#progress_text').html('0% Complete');
                $('#progress').css('width','0px');
                
                //slide steps
                $('#second_step').slideUp();
                $('#first_step').slideDown();     

    });

    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');
 
        var fields2 = $('#second_step input[textarea]');
        var error = 0;
        fields2.each(function(){
			var value = $(this).val();
			
            if( value.length<5 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }	
		});	
		
        if(error <= 0) { 
                //update progress bar
                $('#progress_text').html('50% Complete');
                $('#progress').css('width','170px');
                
                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();     
        } else 
			return false;

    });

	$('#back_third').click(function(){

                //update progress bar
                $('#progress_text').html('25% Complete');
                $('#progress').css('width','85px');
                
                //slide steps
                $('#third_step').slideUp();
                $('#second_step').slideDown();     

    });

    $('#submit_third').click(function(){
        //update progress bar
        $('#progress_text').html('75% Complete');
        $('#progress').css('width','255px');

        //prepare the fourth step
		var fields3 = new Array(
			$('#time').val(),  
			$('#budget').val()             
        );
		var fields2half = new Array(
			$('#detail').val()
		);
		var fields2 = new Array(
            $('#other').val(),   
			$('#pages').val()		
		);	

		var fields1 = new Array(
            $('#name').val(),
            $('#email').val(),
            $('#phone').val(),
            $('#contact').val(),
            $('#url').val()
		);
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
			$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
			$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
			$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
        });
                
        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();            
    });

	$('#back_fourth').click(function(){

                //update progress bar
                $('#progress_text').html('50% Complete');
                $('#progress').css('width','170px');
                
                //slide steps
                $('#fourth_step').slideUp();
                $('#third_step').slideDown();     

    });

    $('#submit_fourth').click(function(){
        //send information to server

		        //update progress bar
                $('#progress_text').html('100% Complete');
                $('#progress').css('width','339px');
                
                //slide steps
                $('#fifth_step').slideUp();
                $('#fourth_step').slideDown(); 
				
		if(error <= 0) {        	
        	return true
    	}
    	else{
    		return false
    	}
				  
    });

});

// BEGIN JAVASCRIPT
$(function(){
	
    //original field values
    var field_values = {
            //id  :  value
            'name'  :  'your name',
            'email'  :  'your email',
			'yourmessage'  :  'I would like to inquire about'
    };

    //inputfocus
    $('input#name').inputfocus({ value: field_values['name'] });
    $('input#email').inputfocus({ value: field_values['email'] });
	$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });

    //form validation
    $('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
    $('#submit').click(function(){
        //remove classes
        $('#sendamessage input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
        var error = 0;
        fields1.each(function(){
            var value = $(this).val();
            if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error'); // css class
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid'); // css class
            }
        });     
        
        if(!error) {
        	// this is where I get confused. How do I make this send the form?
        	alert('Data sent');
    		});
        } 						
    }); 	
});
// END JAVASCRIPT


        <form method="post" action="" onsubmit="return validateForm()" >
			<input type="hidden" name="ccf_customhtml" value="1" />
			<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
			<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
            <input type="hidden" name="required_fields" value="" />

            	<label for="name">Name</label>
            		<input type="text" name="name" id="name" value="your name" /> 
            
            	<label for="email">Email</label>
            		<input type="text" name="email" id="email" value="your email" /> 
            
            	<label for="yourmessage">Your Message</label>
            		<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>

            		<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
        </form>

/********************************************************************************
 *
 * FORM VALIDATION 
 *
 ********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
    if ( grp.length == null ) return grp.checked ? grp.value : null;
    for ( var g = 0; g < grp.length; ++g )
    {
        if ( grp[g].checked ) return grp[g].value;
    }
    return null;
}
// trim a string
function trim(fld)
{
    var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
    fld.value = val;
    return val;
}
 
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
    var email = trim( fld );
    fld.value = email;
    return echk.test(email);
}
 
var digonly = /[^\d]/g
function formatPhone( fld )
{
    var ph = fld.value.replace( digonly, "" );
    if ( ph.length != 10 ) return;
    fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
 
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
    return phchk.test(fld.value);
}
 
function validateForm( frm )
{
	var oops = "";
    
    if ( trim( frm.elements["Username."] ).length  < 5 )
        oops += "You must enter your first and last name\n";
    if ( ! emailCheck( frm.elements["Email."] ) )
        oops += "That does not appear to be a valid email address\n";
	if ( trim( frm.elements["Department."] ).length  < 3)
        oops += "You must enter your department name\n";
    if ( ! phoneCheck( frm.elements["Phone."] ) )
        oops += "That is not a valid 10-digit phone number\n";
    if ( trim( frm.elements["ShipToBuildingRoom."] ).length  < 5 )
        oops += "You must enter your building and room information\n";
	if ( trim( frm.elements["StreetAddress."] ).length  < 5 )
        oops += "You must enter your street address information\n";
	if ( trim( frm.elements["CityZip."] ).length  < 5 )
        oops += "You must enter your city and zip code information\n";
		apptype = getRBValue( frm.elements["Type."] );
    if ( apptype == null )
        oops += "You must check one class\n";
   
    var app = getRBValue( frm.RequireApprovalYesNo );
    if ( app == null )
        oops += "You must specify whether or not approval is required.\n";
    if ( app == "Yes" )
    {
        if ( trim( frm.Approver ).length < 5 )
            oops += "You must enter the name of the approver\n";
        if ( ! emailCheck( frm.ApprovalEmail ) )
            oops += "The approval email is not a valid email address\n";
    }
   
 }
 
function showapp(yesno)
{
    document.getElementById("APP1").style.display = 
    document.getElementById("APP2").style.display = 
    document.getElementById("APP3").style.display = 
		yesno ? "" : "none";
}
 
</SCRIPT>

function myForm(){
	// Make quick references to our fields
	var fname = document.getElementById('fname');
	var lname = document.getElementById('lname');
	var birth_month = document.getElementById('birth_month');
	var birthday = document.getElementById('birthday');
	var birthyear = document.getElementById('birthyear');

	
	// Check each input in the order that it appears in the form!
	if(isAlphabet(fname, "Please enter only letters for your first name")){
		if(isAlphabet(lname, "Please enter only letters for your last name")){
			if(madeSelection(birth_month, "Pleace choose a birth month")){
				if(madeSelection(birthday, "Please choose a birth day")){
					if(madeSelection(birthyear, "Please choose a birth year")){
						return true;
						}
					}
				}
			}
		}

	
	return false;
}



function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z ]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}


function madeSelection(elem, helperMsg){
	if(elem.value == ''){
		alert(helperMsg);
		elem.focus();
		return false;
	}else{
		return true;
	}
}

</script>

<!-- the snippet that creates the form fields is he  -->

	$count = $line;
	 $i = 1;
while ($i <= $count) {
     $i++;  /* the printed value would be
                   $i before the increment
                   (post-increment) */
				   $x = $i-1;
				
				   
	?>
<form name="register1" class="registration_form" method="post" action="register2.php" target="_self" onsubmit="return myForm()">
	
    
    First Name<br><input type="text" name="kfname[]" id="fname" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" /><br>

Kid's Last Name<br><input type="text" name="klname[]" id="lname" onfocus="this.className='reg_live';" onblur="this.className='reg_off';"  /><br>
    
   Birthdate<br>
    <select style="width:75px;" id="birth_month" name="bdate2[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">month</option>
  <option value="01">Jan</option>
  <option value="02">Feb</option>
<!-- etcetera -->
</select>
    
    
        <select style="width:57px;" id="birthday" name="bdate[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">day</option>
  <option value="01">01</option>
  <option value="02">02</option>
<!-- etcetera -->
</select>
	
<select style="width:60px;" id="birthyear" name="bdate3[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">year</option>
  <option value="1993">1993</option>
  <option value="1994">1994</option>
<!-- etcetera -->
  
</select>

</form>

else if ( document.add_form.description.value =~ "@" )

<script type="text/javascript">
<!--

function validate_form ( )
{
    valid = true;

    if ( document.add_form.title.value == "" )
    {
        alert ( "Please fill in the 'Title' field." );
        valid = false;
    } 
  

    else if ( document.add_form.description.value == "" )
    {
        alert ( "Please fill in the 'Description' field." );
        valid = false;
    }
   else if ( document.add_form.description.value =~ "@" )
    {
        alert ( "Please fill in the 'Description' field." );
        valid = false;
    }

   else if ( document.add_form.address1.value == "" )
    {
        alert ( "Please fill in the 'Address' field." );
        valid = false;
    } 

	   else  if ( document.add_form.city.value == "" )
    {
        alert ( "Please fill in the 'City' field." );
        valid = false;
    } 

	else if ( document.add_form.state.selectedIndex == 0 )
    {
        alert ( "Please select a State." );
        valid = false;
    }

	    else if ( document.add_form.zip.value == "" )
    {
        alert ( "Please fill in the 'Zip Code' field." );
        valid = false;
    } 

    return valid;

}

//-->
</script>

	function validateForm()
		{
		var x=document.forms["useraccount"]["firstname"].value
			if (x==null || x=="")
 		 	{
  			document.getElementById("errorfirstname").innerHTML="enter first name";
  			return false;
  			}
  			else
  			{
  			document.getElementById("errorfirstname").innerHTML="";
  			}
  			
  		
  		var x=document.forms["useraccount"]["lastname"].value
			if (x==null || x=="")
 		 	{
  			document.getElementById("errorlastname").innerHTML="enter last name";
  			return false;
  			}
  			else
  			{
  			document.getElementById("errorlastname").innerHTML="";
  			}
  		}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
	<meta name="author" content="" />
	<meta name="description" content="forms" />
	<meta name="keywords" content="Client Side Programming, JavaScript, CSS" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	<link rel="stylesheet" href="javascript.css"/>
	<script type="text/javascript" src="CSP.js"></script>
   <title>Forms::</title>
   </head>
   <body>
	<div id="container">
	   <!-- Begin web page -->
	   <div id="header"><!-- Header and Navigation -->
		<!-- Page Heading --><!-- Navigation -->  

	<script type="text/javascript">
	   displayHeader();
	</script> <br/><br/>
	   </div>

	   <div id="content">
	   <!-- Main Content -->
	   <h1>Photo Gallery: Ordering Form</h1><div id="orderForm">
	   <script type="text/javascript">
	   displayPhoto();
	   </script>
	   <div id="photoName"><p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspCity&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNight</p>     
	   </div>
	   
	<form id="frmCourse" method="get" action="ErrorMessage_FormProcessor.htm" 
        enctype="application/x-www-form-urlencoded"
        onsubmit= "return validate();">  // this is calling the function in my js file 
      	<fieldset>
	<legend>Customer Information</legend>
	<!-- Name Input --><div class=nameWrapper>
      	<p><label for="txtName" id="lblName">Name: </label>
        <input type="text" name="txtName" id="txtName" accesskey="N" tabindex="0" value="" />
        <label class="errorMessage" id="errMessageName">* Required Field</label></p>
      
      	<!-- Email -->
      	<p><label for="txtEmail" id="lblEmail">Email: </label>
        <input type="text" name="txtEmail" id="txtEmail" accesskey="E" tabindex="1" value="" />
        <label class="errorMessage" id="errMessageEmail">* Required Field</label></p></div>
	</fieldset><br/>

	<fieldset>
	<legend>Select Image</legend>
	<!-- Order Option -->
      	<p><label for="rdImageOne" id="rdImageOne">City</label>
        <input type="radio" name="rdImageOne" id="rdImageOne" accesskey="C" tabindex="2" value="" />
      
      	<label for="rdImageTwo" id="rdImageTwo">Night</label>
        <input type="radio" name="rdImageOne" id="rdImageTwo" accesskey="N" tabindex="3" value="" />
        <label class="errorMessage" id="errMessageImageTwo">* Select an Image</label></p>
	</fieldset><br/>	

	<fieldset>
	<legend>Order Information</legend>
	<!-- Size Option -->
      	<p><label for="rdoptionOne" id="rdoptionOne">4-Wallets ($10)</label>
        <input type="radio" name="rdoption" id="rdoptionOne" accesskey="O" tabindex="4" value="" />
      
      	<label for="rdoptionTwo" id="rdoptionTwo">8X10 ($20)</label>
        <input type="radio" name="rdoption" id="rdoptionTwo" accesskey="T" tabindex="5" value="" />
        <label class="errorMessage" id="errMessageOptionTwo">* Select a size</label></p>

      	<p><label for="rdoptionThree" id="rdoptionThree">2-4X6 ($10)</label>
        <input type="radio" name="rdoption" id="rdoptionThree" accesskey="H" tabindex="6" value="" />

      	<label for="rdoptionFour" id="rdoptionFour">11X14 ($30)</label>
        <input type="radio" name="rdoption" id="rdoptionFour" accesskey="F" tabindex="7" value="" /></p>

      	<p><label for="rdoptionOne" id="rdoptionOne">5X7 ($10)</label>
        <input type="radio" name="rdoption" id="rdoptionFive" accesskey="I" tabindex="8" value="" /></p>
	
	<p><label for="txtQuantity" id="lblQuantity">Quantity: </label>
        <input type="text" name="txtQuantity" id="txtQuantity" accesskey="X" tabindex="9" value="" />
        <label class="errorMessage" id="errMessageQuantity">* Must Be 1-25</label></p>
         
      	<!-- Submit Buttons -->
      	<p><div class="submitWrapper"><input type="submit" name="btnSubmit" id="btnSubmit" value="Prepare Order" align = "center" accesskey="s" tabindex="10" /></p>
	</div>
	</fieldset><br/>
  	</form></div>

 
	   <div id="footer">
	   <!-- Footer -->
	   <!-- Begin Footer Div-->
	   <script type="text/javascript">displayFooter();</script>
           <!-- End Footer Div -->
	   </div>
	   <!--End web page -->
	</div>
   </body>
</html>

function validate(){
	   
	var blnError = false;
	   //validate if email textbox is empty 
	if (document.forms[0].txtEmail.value <= 0){
	document.getElementById('errMessageEmail').style.display="inline";
	document.forms[0].txtEmail.focus();
	blnError = true;
	}
	else{
	document.getElementById('errMessageEmail').style.display="none";
	}

	   //validate if name textbox is empty 
	if (document.forms[0].txtName.value == ""){
	document.getElementById('errMessageName').style.display="inline";
	document.forms[0].txtName.focus();
	blnError = true;
	}
	else{
	document.getElementById('errMessageName').style.display="none";
	}
	
         //validate if email quantitybox is empty 
	if (document.forms[0].txtQuantity.value == ""
	||document.forms[0].txtQuantity.value <= 0
	||document.forms[0].txtQuantity.value > 25
	||isNaN(document.forms[0].txtQuantity.value)){
			
	document.getElementById('errMessageQuantity').style.display="inline";
	document.forms[0].txtQuantity.focus();
	blnError = true;
	}
	else{
	document.getElementById('errMessageQuantity').style.display="none";
	}
          //validate if picture option radio button is choosen 
	var sizeSelection = false;
	for(var i=0; i<5; ++i){
	   if(document.forms[0].rdoption[i].checked ==true){
		sizeSelection = true;
	   }
	}
	if(sizeSelection==false){
		document.getElementById('errMessageOptionTwo').style.display="inline";
		return false;
	}
	else{
	document.getElementById('errMessageOptionTwo').style.display="none";
	   sizeSelection == true;
	}
      //validate if size option radio button is choosen 
	var pictureSelection = false;
	for(var i=0; i<2; ++i){
	   if(document.forms[0].rdImageOne[i].checked ==true){
		pictureSelection = true;
	   }
	}
	if(pictureSelection==false){
		document.getElementById('errMessageImageTwo').style.display="inline";
		return false;
	}
	else{
	document.getElementById('errMessageImageTwo').style.display="none";
	   pictureSelection == true;
	}

	
	if (blnError == true){
	return false;
	}  
	else {
	return true;
	} 
	}

<form method="post" form action="sendmail.asp">
	<p><label for="emailAddr">Email Address:
		<input id="emailAddr" type="text" size="30" class="reqd email" />
	</label></p>
	<p><label for="color">Colors:
		<select id="color" class="reqd">
		  <option value="">Choose a player</option>
		  <option value="rodgers">Aaron Rodgers</option>
		  <option value="woodson">Charles Woodson</option>
		  <option value="driver">Donald Driver</option>
		  <option value="hawk">A.J. Hawk</option>
		  <option value="bigby">Atari Bigby</option>
		  <option value="barnett">Nick Barnett</option>
        </select>
	</label></p>
	<p>Options:
		<label for="home"><input type="checkbox" id="home" value="Yes" />
		Home Jersey
		</label>
		<label for="away"><input type="checkbox" id="away" value="Yes" />
		Away Jersey</label></p>
	<p>
	  <label for="jerseySet">Size:&nbsp;&nbsp;
		<input type="radio" id="large" name="jerseySet" value="sizeLarge" class="radio" />
		Large
		<input type="radio" id="xlarge" name="jerseySet" value="sizeXlarge" class="radio" />
		X-Large
	</label></p>
	<p>
	  <label for="zip">Enter your Zip code:<br />
		Zip: <input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList" />
        <select id="dealerList" size="4" class="zip">
			<option value="Kenosha--Wisconsin">Kenosha--Wisconsin</option>
			<option value="Racine--Wisconsin">Racine--Wisconsin</option>
			<option value="Milwaukee--Wisconsin">Milwaukee--Wisconsin</option>
			<option value="Waukesha--Wisconsin">Waukesha--Wisconsin</option>
			<option value="Waterford--Wisconsin">Waterford--Wisconsin</option>
		</select>

  </label></p>
	<p><input type="submit" value="Submit" />&nbsp;<input type="reset" /></p>
</form>

window.onload = initForms;

function initForms() {
	for (var i=0; i< document.forms.length; i++) {
		document.forms[i].onsubmit = function() {return validForm();}
	}
	document.getElementById("home").onclick = jerseySet;
}

function validForm() {
	var allGood = true;
	var allTags = document.getElementsByTagName("*");

	for (var i=0; i<allTags.length; i++) {
		if (!validTag(allTags[i])) {
			allGood = false;
		}
	}
	return allGood;

	function validTag(thisTag) {
		var outClass = "";
		var allClasses = thisTag.className.split(" ");
	
		for (var j=0; j<allClasses.length; j++) {
			outClass += validBasedOnClass(allClasses[j]) + " ";
		}
	
		thisTag.className = outClass;
	
		if (outClass.indexOf("invalid") > -1) {
			invalidLabel(thisTag.parentNode);
			thisTag.focus();
			if (thisTag.nodeName == "INPUT") {
				thisTag.select();
			}
			return false;
		}
		return true;
		
		function validBasedOnClass(thisClass) {
			var classBack = "";
		
			switch(thisClass) {
				case "":
				case "invalid":
					break;
				case "reqd":
					if (allGood && thisTag.value == "") {
						classBack = "invalid ";
					}
					classBack += thisClass;
					break;
				case "radio":
					if (allGood && !radioPicked(thisTag.name)) {
						classBack = "invalid ";
					}
					classBack += thisClass;
					break;
				case "isNum":
					if (allGood && !isNum(thisTag.value)) {
						classBack = "invalid ";
					}
					classBack += thisClass;
					break;
				case "isZip":
					if (allGood && !isZip(thisTag.value)) {
						classBack = "invalid ";
					}
					classBack += thisClass;
					break;
				case "email":
					if (allGood && !validEmail(thisTag.value)) {
						classBack = "invalid ";
					}
					classBack += thisClass;
					break;
				default:
					if (allGood && !crossCheck(thisTag,thisClass)) {
						classBack = "invalid ";
					}
					classBack += thisClass;
			}
			return classBack;
		}
				
		function crossCheck(inTag,otherFieldID) {
			if (!document.getElementById(otherFieldID)) {
				return false;
			}
			return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
		}
		
		function radioPicked(radioName) {
			var radioSet = "";

			for (var k=0; k<document.forms.length; k++) {
				if (!radioSet) {
					radioSet = document.forms[k][radioName];
				}
			}
			if (!radioSet) {
				return false;
			}
			for (k=0; k<radioSet.length; k++) {
				if (radioSet[k].checked) {
					return true;
				}
			}
			return false;
		}
		
		function isNum(passedVal) {
			if (passedVal == "") {
				return false;
			}
			for (var k=0; k<passedVal.length; k++) {
				if (passedVal.charAt(k) < "0") {
					return false;
				}
				if (passedVal.charAt(k) > "9") {
					return false;
				}
			}
			return true;
		}
		
		function isZip(inZip) {
			if (inZip == "") {
				return true;
			}
			return (isNum(inZip));
		}
		
		function validEmail(email) {
			var invalidChars = " /:,;";
		
			if (email == "") {
				return false;
			}
			for (var k=0; k<invalidChars.length; k++) {
				var badChar = invalidChars.charAt(k);
				if (email.indexOf(badChar) > -1) {
					return false;
				}
			}
			var atPos = email.indexOf("@",1);
			if (atPos == -1) {
				return false;
			}
			if (email.indexOf("@",atPos+1) != -1) {
				return false;
			}
			var periodPos = email.indexOf(".",atPos);
			if (periodPos == -1) {	
				return false;
			}
			if (periodPos+3 > email.length)	{
				return false;
			}
			return true;
		}
		
		function invalidLabel(parentTag) {
			if (parentTag.nodeName == "LABEL") {
				parentTag.className += " invalid";
			}
		}
	}
}

function jerseySet() {
	if (this.checked) {
		document.getElementById("sizeLarge").checked = true;
	}
}