Form Submission

Thanat0s · 08-23-2011, 01:27 PM

Ok, I am reasonably new to javascript, and I have been trying to code some really basic client-side form validation. The validation part is working, but for some reason the form won't submit if no errors are found. I have tried all different variations of the submit syntax. i.e. document.login_form.submit();. But settled with the one on W3Schools even though it still didn't work.

I would really appreciate any advise. Here is my code:

Code:

<head>
<title>Project Rival - Authentication</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function verify() {

var themessage = "Please enter your";

if (document.login_form.user.value=="") {
themessage = themessage + " username";
}

if (document.login_form.user.value=="" && document.login_form.pass.value=="") {
themessage = themessage + " and";
}

if (document.login_form.pass.value=="") {
themessage = themessage + " password";
}

//alert if fields are empty and cancel form submit
if (document.login_form.user.value!="" && document.login_form.pass.value!="") {
document.getElementById("login_form").submit();
return true;
}
else {
document.getElementById("error").innerHTML = themessage;
return false;
   }
}

</script>
</head>

<body>
<div id="container">

    <div id="login_box_top">&nbsp;</div>
    <div id="logo"><img src="images/projectrival.jpg" width="150"/></div>
    <div id="error"></div>
    <div id="login">
    	<form action="login.php" method="post" name="login_form" id="login_form">
        	<input name="user" class="input" id="user" type="text" size="30" maxlength="30" /><br /><br />
            <input name="pass" class="input" id="pass" type="password" size="30" maxlength="30" /><br /><br />
            <input name="submit" id="submit" type="button" value="Login" onclick="verify()" />
        </form>

  </div>
    <div id="login_box_bottom">&nbsp;</div>
    
    <div id="copy"><p>&copy; Martin Day 2011 </div>

</div>

</body>
</html>

Many Thanks

Rowsdower! · 08-23-2011, 02:13 PM

Welcome to the forum!

Get rid of (or rename) the name "submit" on the submit button (you can leave the ID set to submit if you like).

Then, set your submit button's type to "submit" rather than "button."

Then use the javascript function call for the "onsubmit" attribute of the form element rather than the "onclick" attribute of the submit button (after all, what if the user hits enter rather than clicking the submit button?). And you can save a step by using "return verify();" (as opposed to just "verify();") as the javascript call. Then you don't even need to write in anything for form submission in your function, you just return true when it's good and false when it's not. And then everything should work as you intended

Cleaned up and properly working version is below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Project Rival - Authentication</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function verify() {
	var themessage = "Please enter your";
	if (document.getElementById('user').value=="") {
		themessage = themessage + " username";
	}
	if (document.getElementById('user').value=="" && document.getElementById('pass').value=="") {
		themessage = themessage + " and";
	}
	if (document.getElementById('pass').value=="") {
		themessage = themessage + " password";
	}
	//alert if fields are empty and cancel form submit
	if (document.getElementById('user').value!="" && document.getElementById('pass').value!="") {
		return true;
	}
	else {
		document.getElementById("error").innerHTML = themessage;
		return false;
	}
}

</script>
</head>
<body>
<div id="container">
  <div id="login_box_top">&nbsp;</div>
  <div id="logo"><img src="images/projectrival.jpg" alt="Project Rival" style="width:150px" /></div>
  <div id="error"></div>
  <div id="login">
    <form action="login.php" method="post" id="login_form" onsubmit="return verify();">
      <div>
        <input name="user" class="input" id="user" type="text" size="30" maxlength="30" /><br /><br />
        <input name="pass" class="input" id="pass" type="password" size="30" maxlength="30" /><br /><br />
        <input id="submit" type="submit" value="Login" />
      </div>
    </form>
  </div>
  <div id="login_box_bottom">&nbsp;</div>
  <div id="copy"><p>&copy; Martin Day 2011</p></div>
</div>
</body>
</html>

Note that you could still stand to clean up your if/else logic to reduce code, but this is functionally correct now.

Thanat0s · 08-23-2011, 02:22 PM

Thank you so much for your help. I just copied your code over and worked a treat =]

I will take another look at my if/else.

Thank you again!