Javascript activating before required field validation.

Dev Shed Forums Sponsor:

February 19th, 2013, 06:18 PM

harrjm

Contributing User

Join Date: Jun 2011

Posts: 33

Time spent in forums: 15 h 6 m 53 sec
Reputation Power: 2

Javascript activating before required field validation.

I have 2 forms on 2 different html pages that both have required fields. They also both have Javascript validation functions that are called just before submit. The problem is if you click submit with the required fields empty in one document it gives you the brower message "Please fill out this field" (the desired effect), while the other page with nearly identical code goes to the javascipt function and does its thing with out saying "Please fill out this field".

So in short I dont want the functions to be called if there are still blank required fields. One page does this perfectly while the other doesnt.

The page that works: (doesnt go to script unless all fields full)

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="registercss.css">
		<title>CS Consultant Management System</title>
		<script type="text/javascript">

		function validatePassword()
		{

			password1 = document.getElementById("passwordbox").value;
			password2 = document.getElementById("retypepasswordbox").value;
			if (password1 != password2)
			{
				document.getElementById("passwordbox").value = "";
				document.getElementById("retypepasswordbox").value = "";
				document.getElementById("retypepasswordbox").style.borderColor='red';
				document.getElementById("passwordbox").style.borderColor='red';
				document.getElementById("passwordbox").focus()
				document.getElementById("invalidtext").style.visibility = 'visible';
				return false;
			}
		}
		</script>
	</head>
	<body>
		<center><img id = "logo" src="logo.png" alt="leftbar"></img></center>
		<form id = "registerDiv" onsubmit="" style='position: relative;'>
					<p id = "header"> Enter Account Information</p>
					<div id = "underline"</div> 
					<p id = "usernametext">Username: </p>
					<input id="usernamebox"  type="textbox" required></input>
					<p id = "emailtext">Email: </p>
					<input id="emailbox"  type="email" required></input>
					<p id = "passwordtext">Password: </p>
					<input id="passwordbox"  type="password" required></input>
					<p id = "retypepasswordtext">Retype Password: </p>
					<input id="retypepasswordbox" type="password" required></input>
					<p id = "invalidtext">*Passwords Don't Match</p>
					<input type="submit"  id = "register" onclick = "return validatePassword()" value = "Create Account"></input>
		</form>
	</body>
</html>

The page that doesnt work: (goes straight to script even if fields blank)

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="pagestyle.css">
		<title>CS Consultant Management System</title>
		<script type="text/javascript">

		function validateAccount()
		{
			var invalidUser = document.getElementById("usernamebox").value;
			if (invalidUser != "test")
			{
				document.getElementById("usernamebox").value = "";
				document.getElementById("passwordbox").value = "";
				document.getElementById("usernamebox").style.borderColor='red';
				document.getElementById("passwordbox").style.borderColor='red';
				document.getElementById("usernamebox").focus()
				document.getElementById("invalidaccount").style.visibility = 'visible';
				return false;
			}
		}
		</script>
	</head>
	<body>
		<center><img id = "logo" src="logo.png" alt="leftbar"></img></center>
		<div id = "mainDiv">
			<div id = "buildingdiv" style='position: relative;'>
				<center><img id = "buildings" src="buildings3.png" style='position: absolute;' alt="leftbar" onload="this.style.opacity='1';"/></center>
				<center><img id = "buildings2" src="buildings2.png" style='position: absolute;' alt="leftbar"/></center>
			</div>
			<div id = "loginDiv" style='position: relative;'>
				<form id = "loginform" onsubmit="" style='position: relative;'>
					<p id = "usernametext">Username: </p>
					<p id = "passwordtext">Password: </p>
					<input id="usernamebox"  type="textbox" required></input>
					<input id="passwordbox"  type="password" required></input>
					<input type="submit"  id = "submit" onclick = "return validateAccount()" value = "Log In"></input>
					<p id = "invalidaccount">*Invalid Username or Password</p>
					<a href="register.html" id = "register">Don't have an account? Click Here.</a>
				</form>
			</div>
		</div>
	</body>
</html>

February 19th, 2013, 09:24 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 29 m 12 sec
Reputation Power: 69

Here your comparing password1 to password2; in your if condition. So if both password fields are not exactly the same, then you get the error.

Code:

password1 = document.getElementById("passwordbox").value;
password2 = document.getElementById("retypepasswordbox").value;
if (password1 != password2)

And here...

Code:

var invalidUser = document.getElementById("usernamebox").value;
if (invalidUser != "test")
{

You are checking to see if the inValidUser variable is "test"... and if it's not; then you get the error.

My advice; on how you can get around this is... do not use the "validateAccount()" function onclick (triggered by the submit button's onclick event); but, add this function to the form's onsubimt event... instead.

February 19th, 2013, 10:28 PM

harrjm

Contributing User

Join Date: Jun 2011

Posts: 33

Time spent in forums: 15 h 6 m 53 sec
Reputation Power: 2

Quote:

Originally Posted by web_loone08

Here your comparing password1 to password2; in your if condition. So if both password fields are not exactly the same, then you get the error.

Code:

password1 = document.getElementById("passwordbox").value;
password2 = document.getElementById("retypepasswordbox").value;
if (password1 != password2)

And here...

Code:

var invalidUser = document.getElementById("usernamebox").value;
if (invalidUser != "test")
{

Ah yah now that I think about it there was a whole logic error in my process. I wanted to do it before the onsubmit like in the password just to check it before sending it off to the server (or whatever else I end up doing with it) but with this page I would have to submit it to see if the username/password is a valid account or not anyway. Thanks for making me realize that!!

Javascript activating before required field validation.

Developer Shed Advertisers and Affiliates