SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript Form Validation

    Hello,

    I am taking class that is introducing JavaScript concepts. The have asked us to make a form with certain fields and rules and to use JavaScript to validate it. We were asked to validate one version using jQuery and one without, the jQuery one was done in a few minutes but I am having a bit of a problem using the JavaScript version and wondering if someone could help me.

    Only the first data input field is validating, and I know that I am close but just can seem to get the last bit to work not sure if I have incorrectly placed the functions or if something is wrong but I am using the same method for each field. There is a // comment at the start of each function to show what the rule is based on.

    Thank you in advance for any help or advice.

    Please see full HTML/JavaScript code below:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    Code JavaScript:
    window.onload=function(){
     
    			var spans = document.getElementsByTagName("span");
    			for(var i = 0; i < spans.length; i++){
    				if(spans[i].className = "errormessage")
    				{
    					spans[i].style.display="none";
    				}
    			}
     
    			document.forms[0].elements[0].focus();
     
    			// Validate Username (Rule: data must be between 5-10 characters)
    			document.forms[0].onsubmit=function(){
    				var user = document.getElementById('username');
    				var username = user.value;
    				if (username.length < 4)
    				{
    					document.getElementById("error_username").style.display="inline";
    					return false;
    				}
    				else if (username.length > 9)
    				{
    					document.getElementById("error_username").style.display="inline";
    					return false;
    				}
    				}
     
    		// Validate email address (Rule: data must contain "@" and ".")
    			document.forms[1].onsubmit=function(){
    				var email = document.getElementById('email');
    				var emailaddress = email.value;
    				if ((emailaddress.indexOf('@') = -1) || (emailAddress.indexOf('.') = -1)) 
    				{
    					document.getElementById("error_email").style.display="inline";
    					return false;
    				}
    				}
     
    			// Validate street address (Rule: must start with a number)
    			document.forms[2].onsubmit=function(){
    			var street = document.getElementById('street');
    			var streetaddress = street.value;
    			if (isNaN(streetaddress.length[0]))
    			{
    				document.getElementById("error_street").style.display="inline";
    				return false;
    			}
     
    			}
     
    			// Validate Year of Birth (Rule: must be only numbers)
    			document.forms[2].onsubmit=function(){
    			var year = document.getElementById('year');
    			var birthyear = year.value;
    			if (isNaN(birthyear))
    			{
    				document.getElementById("error_year").style.display="inline";
    				return false;
    			}
     
    			}
     
    	} // end of window.onload
    </script> </head> <body> <form action="fake.php" id="myform"> <label for="username">Username: </label> <input type="text" name="username" id="username" /> <span id="error_username" class="errormessage">Your username must be between 5-10 characters</span> <br /> <label for="email">Email Address: </label> <input type="text" name="email" id="email" /> <span id="error_email" class="errormessage">Please enter a valid email address</span> <br /> <label for="street">Street Address: </label> <input type="text" name="street" id="street" /> <span id="error_street" class="errormessage">Please enter a valid street address</span> <br /> <label for="year">Year of Birth: </label> <input type="text" name="year" id="year" /> <span id="error_year" class="errormessage">Please enter a valid birth year</span> <br /> <input type="submit"> </form> </body> </html>

  2. #2
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks kammel,

    Yes I had posted this on both forums. I will discontinue on this one.

    Max


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •