#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    33
    Rep Power
    4

    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>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    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.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    33
    Rep Power
    4
    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")
    {
    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.
    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!!

IMN logo majestic logo threadwatch logo seochat tools logo