Hello everyone,

I am taking a class in college called Internet applications and have stumbled across a problem specifically with JavaScript. I am trying to validate a form and highlight the text box that does not meet the required input length. I have successfully generated errors using JQuery but this week's assignment requires me to use at least two effects from the Script.Aculo.us library with one of them being an auto complete feature. At this point I am stuck trying to get the code to recognize 'onblur', 'onkey' or 'onchange' event so I can then try to use the Script.Aculo.us library. I am pretty sure I am missing something obvious but I have played with this over week and I still do not understand what I am missing. I asked the someone please show me the error of my way and if possible I would like an explanation on how to apply effects from the library. Any help is welcome.

Thanks,

Kevin

Here's the Code:

Code:
<!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>Registration</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
        <script src="/lib/prototype.js"></script>
        <script src="/src/scriptaculous.js?load=effects"></script>
		<link href="/css/sitewide.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript">
		function validateFName(value)
			{
				var nf = document.getElementById("NameF").length;				
				if(nf < 2)
				{
					alert("Last Name too short")
					<!-- enter code for script.aculo.us -->
					new Effect.Highlight('NameF', {startcolor: "#ff0000"})
				}
				else {new Effect.Highlight('NameF', {restoreColor: "#000000"})}
			}
		function validateLName(value)
			{				
				var nl = document.getElementById("NameL").length;
				if(nl < 2)
				{
					alert("First Name too short")
					<!-- enter code for script.aculo.us -->
					new Effect.Highlight('NameL', {startcolor: "#ff0000"})
				}
				else {new Effect.Highlight('NameL', {restoreColor: "#000000"})}				
			}
		function validateZipCode()
            {
            if(!isZipCode(value))
				{
				alert("Invalid Zip Code")
                <!-- enter code for script.aculo.us -->
				}
            }
        </script>
</head>

<body>
<div id="regformbody">
        <p>
			<form id="registrationForm" name="registration" method="post" action="">    	        	      
    	        <label for="NameF">First Name: </label>
    	        <input type="text" size="30" name="NameF" id="NameF" onblur="validateFName()" onkeyup="validateFName()" onchange="validateFName()" tabindex="1"/>
    	        <br /><br />	  
    	        <label for="NameL">Last Name:</label>
    	        <input type="text" size="30" name="NameL" id="NameL" onblur="validateLName()" onkeyup="validateLName()" onchange="validateLName()" tabindex="2" />
    	        <br /><br />    	  
    	        <label for="Address">Address:</label>
    	        <input type="text" size="30" name="Address" id="Address" tabindex="3" />
    	        <br /><br />    	  	
    	        <label for="City">City:</label>
    	        <input type="text" size="30" name="City" id="City" tabindex="4" />
    	        <br /><br />
    	        <label for="State2">St:</label>
    	        <select name="State" id="State2" tabindex="5">
                <option value=""Selected>None
               	<option value="AL">Alabama<option value="AK">Alaska<option value="AZ">Arizona<option value="AR">Arkansas<option value="CA">California<option value="CO">Colorado
                <option value="CT">Connecticut<option value="DE">Delaware<option value="FL">Florida<option value="GA">Georgia<option value="HI">Hawaii<option value="ID">Idaho
                <option value="IL">Illinois<option value="IN">Indiana<option value="IA">Iowa<option value="KS">Kansas<option value="KY">Kentucky<option value="LA">Louisiana
                <option value="ME">Maine<option value="MD">Maryland<option value="MA">Massachusetts<option value="MI">Michigan<option value="MN">Minnesota
                <option value="MS">Mississippi<option value="MO">Missouri<option value="MT">Montana<option value="NE">Nebraska<option value="NV">Nevada
                <option value="NH">New Hampshire<option value="NJ">New Jersey<option value="NM">New Mexico<option value="NY"> New York<option value="NC">North Carolina
                <option value="ND">North Dakota<option value="OH">Ohio<option value="OK">Oklahoma<option value="OR">Oregon<option value="PA">Pennsylvania
                <option value="RI">Rhode Island<option value="SC">South Carolina<option value="SD">South Dakota<option value="TN">Tennessee<option value="TX">Texas
                <option value="UT">Utah<option value="VT">Vermont<option value="VA">Virginia<option value="WA">Washington<option value="DC">Washington D.C.
                <option value="WV">West Virginia<option value="WI">Wisconsin<option value="WY">Wyoming
  	          	</select>
    	        <br /><br />
    	        <label for="Zip">Zip:</label>
    	        <input type="number" size="30" name="Zip" id="Zip" tabindex="6" />
    	        <br /><br />    	    
    	        <label for="Phone">Phone:</label>
    	        <input type="text" size="30" name="Phone" id="Phone" tabindex="7" />
    	        <br /><br />    	    
    	        <label for="Email">Email:</label>
    	        <input type="text" size="30" name="Email" id="Email" tabindex="8" />
                <br /><br /><br /><br /><br />
                <p>           
    	        <input type="submit" name="Submit" id="Submit" value="Submit" tabindex="9" />
                </p>
                <br /><br />  	           	    
    	  </form>
            </p>
        </div>
		<script type="text/javascript">
        $(document).ready(function(e) {
            $("#registrationForm").validate(			
				{
				rules:
					{
						NameF:{required:true, minlength:2, maxlength:15},						
						NameL:{required:true, minlength:2, maxlength:15},
						Address:{required:true, minlength:5, maxlength:30},
						City:{required:true, minlength:2, maxlength:30},						
						Zip:{required:true, zipUS:true},
						Phone:{reuired:true, phoneUS:true},
						Email:{required:true, minlength:5,email:true}
					},
				messages:
					{
						NameF:"Please enter your full first name.",
						NameL:"Please enter your full last name.",
						Address:"Please enter your current mailing address.",
						City:"Please enter your city name.",
						Zip:"Please enter your 5 digit mailing zip code",
						Email:"Email should be in the 'you@your.domain' format",
						Phone:"Please enter your phone number"						
					}
				}			
			);
        });
        </script>
        
            

</body>
</html>
and the .CSS file:

Code:
@charset "utf-8";
/* CSS Document */

/*Site BackGround Color */
body {
     background-color:#333333;	  	 
     }
/*Navigation Bar */
#header p {
	color:#CCC;
	text-align:center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:24px;	 
    margin: 0; 
    padding: 20px; 
    cellspacing: 0;
    cellpadding: 0;
	border-bottom: 3px solid black;    
    background-color: #222; 
    } 

#regformbody {
	color:#CCC;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	border: 1px groove black;
	font-size:12px;	 
	margin-left: 20%;
	margin-right: 20%; 
    padding: 20px; 
    cellspacing: 0;
    cellpadding: 0;
    border: 1px solid black;    
    background-color: #222; 
    } 

#regformbody label{
	display:inline-block;
	float:left;
	clear:left;
	width: 500px;
	text-align:right;
    } 
#regformbody input{
	display:inline-block;
	float:left;
	}
#regformbody select{
	display:inline-block;
	float:left;
	}

#regformbody p{
	display:inline-block;
	text-align:center;
    }