Hello,
I have a problem with my form validator. For some reason it will always return true when it should return false and display and error message (either about a blank username or password).
Here is my javascript:

<script type='text/javascript'>
function ValidateLogin(form)
{
	var error=false;
	document.getElementById('userError').style.display = 'none';
	document.getElementById('passError').style.display = 'none';
	document.getElementById('invalidError').style.display = 'none';
	document.getElementById('usedError').style.display = 'none';
	document.getElementById('loading').style.display = 'block';
	document.getElementById('submit').style.display = 'none';
	with(form)
	{
		if(pass.value==''||pass.value==null)
		{
			document.getElementById('passError').style.display = 'block';
			error=true;
			pass.focus();
		}
		if(user.value==''||user.value==null)
		{
			document.getElementById('userError').style.display = 'block';
			error=true;
			user.focus();
		}
		if(error==true)
		{
			document.getElementById('loading').style.display = 'none';
			document.getElementById('submit').style.display = 'block';
			return(false);
		}
		else
		{
			return(true);
		}
	}
}
</script>

And here is my HTML (JavaScript Included):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TSS SGA Voting System - Login</title>
<style type="text/css">
body {
	font: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: medium;
	color: #FFFFFF;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
a, a:visited {
	color: #FFCC00;
	text-decoration: none;
}
a:hover {
	color: #FFFF00;
	text-decoration: underline;
}
#box #content #loading {
	display: none;
}
#box #content #userError, #box #content #passError, #box #content #invalidError, #box #content #usedError {
	display: none;
	color: #FF0000;
	font-size: 14px;
}
#box #content #mError, #box #content #sError, #box #content #tError {
	display: none;
	color: #FF0000;
	font-size: 14px;
}
</style>
<script type='text/javascript'>
function ValidateLogin(form)
{
	var error=false;
	document.getElementById('userError').style.display = 'none';
	document.getElementById('passError').style.display = 'none';
	document.getElementById('invalidError').style.display = 'none';
	document.getElementById('usedError').style.display = 'none';
	document.getElementById('loading').style.display = 'block';
	document.getElementById('submit').style.display = 'none';
	with(form)
	{
		if(pass.value==''||pass.value==null)
		{
			document.getElementById('passError').style.display = 'block';
			error=true;
			pass.focus();
		}
		if(user.value==''||user.value==null)
		{
			document.getElementById('userError').style.display = 'block';
			error=true;
			user.focus();
		}
		if(error==true)
		{
			document.getElementById('loading').style.display = 'none';
			document.getElementById('submit').style.display = 'block';
			return(false);
		}
		else
		{
			return(true);
		}
	}
}
</script>
</head>
<body>
<div align="center">
	<table width="500" border="0" cellpadding="0" cellspacing="0" id="box">

		<tr height="30"><td width="30"></td><td id="title">Login</td><td width="30"></td></tr>
		<tr><td colspan="3" id="content">
<table align='center' border='0' cellpadding='0' cellspacing='0' id='usedError' style='background:#FFCC00;border:#FFFF00 1px solid; width: 75%; color:#000000; font-size:medium; margin-top: 5px;'><tr><td width='15' bgcolor='#FFFF00'></td><td style='padding-left: 10px;'>Please Enter Your Username</td></tr></table>
<table align='center' border='0' cellpadding='0' cellspacing='0' id='passError' style='background:#FFCC00;border:#FFFF00 1px solid; width: 75%; color:#000000; font-size:medium; margin-top: 5px;'><tr><td width='15' bgcolor='#FFFF00'></td><td style='padding-left: 10px;'>Please Enter Your Password</td></tr></table>
<form name='login' action='system.php' method='post' onsubmit='return ValidateLogin(this);'>
<table border='0' align='center'>
	<tr><td align='right'>Username:</td><td align='left'><input type='text' name='user' /></td></tr>

	<tr><td align='right'>Password:</td><td align='left'><input type='password' name='pass' /></td></tr>
	<tr><td colspan='2' align='center'><input type='submit' value='Login' id='submit' /></td></tr>
</table>
</form>
<div id='loading'><img src='images/loader.gif' /> Loading...</div>
		</td></tr>
		<tr height="30"><td width="30"></td><td id="footer"></td><td width="30"></td></tr>
	</table>

</div>
</body>
</html>

If you notice I have removed some sensitive information and some non-relevant (such as images) tags from the HTML. If you know the problem please help me!!! Thanks so much!!!

made some adjustments, probably not what you want to do with it but got it working. the problem was that in the beginning of your javascript function you are changing the display properties of some elements by ID, well the problem was that some of those elements were missing so I just threw them in there and it works now. If you use firefox's error console it will tell you this kind of stuff.

Also changed your body font css attribute to font-family since that was also giving me a parsing error.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TSS SGA Voting System - Login</title>
<style type="text/css">
body {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: medium;
	color: #FFFFFF;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
a, a:visited {
	color: #FFCC00;
	text-decoration: none;
}
a:hover {
	color: #FFFF00;
	text-decoration: underline;
}
#box #content #loading {
	display: none;
}
#box #content #userError, #box #content #passError, #box #content #invalidError, #box #content #usedError {
	display: none;
	color: #FF0000;
	font-size: 14px;
}
#box #content #mError, #box #content #sError, #box #content #tError {
	display: none;
	color: #FF0000;
	font-size: 14px;
}
</style>
<script type='text/javascript'>
function ValidateLogin(form)
{
	var error=false;
	document.getElementById('userError').style.display = 'none';
	document.getElementById('passError').style.display = 'none';
	document.getElementById('invalidError').style.display = 'none';
	document.getElementById('usedError').style.display = 'none';
	document.getElementById('loading').style.display = 'block';
	document.getElementById('submit').style.display = 'none';
	with(form)
	{
		if(pass.value==''||pass.value==null)
		{
			document.getElementById('passError').style.display = 'block';
			error=true;
			pass.focus();
		}
		if(user.value==''||user.value==null)
		{
			document.getElementById('userError').style.display = 'block';
			error=true;
			user.focus();
		}
		if(error==true)
		{
			document.getElementById('loading').style.display = 'none';
			document.getElementById('submit').style.display = 'block';
			return(false);
		}
		else
		{
			return(true);
		}
	}
}
</script>
</head>
<body>
<div align="center">
	<table width="500" border="0" cellpadding="0" cellspacing="0" id="box">

		<tr height="30"><td width="30"></td><td id="title">Login</td><td width="30"></td></tr>
		<tr><td colspan="3" id="content">
<table align='center' border='0' cellpadding='0' cellspacing='0' id='usedError' style='background:#FFCC00;border:#FFFF00 1px solid; width: 75%; color:#000000; font-size:medium; margin-top: 5px;'><tr><td width='15' bgcolor='#FFFF00'></td><td style='padding-left: 10px;'>Please Enter Your Username</td></tr></table>
<table align='center' border='0' cellpadding='0' cellspacing='0' id='userError' style='background:#FFCC00;border:#FFFF00 1px solid; width: 75%; color:#000000; font-size:medium; margin-top: 5px;'><tr><td width='15' bgcolor='#FFFF00'></td><td style='padding-left: 10px;'>Please Enter Your Username</td></tr></table>
<table align='center' border='0' cellpadding='0' cellspacing='0' id='passError' style='background:#FFCC00;border:#FFFF00 1px solid; width: 75%; color:#000000; font-size:medium; margin-top: 5px;'><tr><td width='15' bgcolor='#FFFF00'></td><td style='padding-left: 10px;'>Please Enter Your Password</td></tr></table>
<table align='center' border='0' cellpadding='0' cellspacing='0' id='invalidError' style='background:#FFCC00;border:#FFFF00 1px solid; width: 75%; color:#000000; font-size:medium; margin-top: 5px;'><tr><td width='15' bgcolor='#FFFF00'></td><td style='padding-left: 10px;'>Please Enter Your Password</td></tr></table>

<form name='login' action='system.php' method='post' onsubmit='return ValidateLogin(this);'>
<table border='0' align='center'>
	<tr><td align='right'>Username:</td><td align='left'><input type='text' name='user' /></td></tr>

	<tr><td align='right'>Password:</td><td align='left'><input type='password' name='pass' /></td></tr>
	<tr><td colspan='2' align='center'><input type='submit' value='Login' id='submit' /></td></tr>
</table>
</form>
<div id='loading'><img src='images/loader.gif' /> Loading...</div>
		</td></tr>
		<tr height="30"><td width="30"></td><td id="footer"></td><td width="30"></td></tr>
	</table>

</div>
</body>
</html>

Thanks. It's always a ridiculous mistake like that with me!!!! :D

Hey, join the club. :P

This question has already been answered. Start a new discussion instead.