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 :slight_smile: 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:


<html>
<head>
<script type="text/javascript">
```javascript

window.onload=function(){
		
			var spans = document.getElementsByTagName("span");
			for(var i = 0; i &lt; 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 &lt; 4)
				{
					document.getElementById("error_username").style.display="inline";
					return false;
				}
				else if (username.length &gt; 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

	<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>

Thanks kammel,

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

Max