JS Form Validation Fails, Yet Form Still Submits? - php

Question

It's pretty much as the question suggests, I have a HTML form with JS validation. Now, I'm still debugging fine details with the validation, but the problem is that the onSubmit function fires the errors when they should be, but the form continues to submit - I have no idea why. I've check the million and one similar problems on StackOverflow, but none seem to have the same cause as mine - I've checked and check and checked. If anyone could help, I'd greatly appreciate it.
Also, I know my code can be shortened, but I'll do that when I figure this problem out.
Form:
<form name="registerForm" method="post" action="index.php" onSubmit="return validateForm()">
<table class="formTable" >
<tr>
<td><i class="smallprint">* denotes a required field.</i></td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtUsrName">
</td>
<td>
User Name* <i class="smallprint"> between 6 and 32 characters (letters, numbers and underscores only)</i><br />
<b class="error" id="userNameError">Error: Please enter a user name between 6 and 32 characters, using letters, numbers and underscores</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtFName">
</td>
<td>
First Name*<br />
<b class="error" id="fNameError">Error: Please enter your first name</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtSName">
</td>
<td>
Surname*<br />
<b class="error" id="sNameError">Error: Please enter your surname</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtEmail">
</td>
<td>
Email* <i class="smallprint">Please use a valid email address, it will be used to validate your account</i><br />
<b class="error" id="emailError1">Error: Please enter an email address<br /></b>
<b class="error" id="emailError2">Error: This is not a valid email address</b>
</td>
</tr>
<tr>
<td>
<input type="text" maxlength="32" width="32" name="regTxtEmailConf">
</td>
<td>
Confirm Email*<br />
<b class="error" id="emailConfError">Error: Both email addresses must match</b>
</td>
</tr>
<tr>
<td>
<input type="password" maxlength="32" width="32" name="regTxtPassword">
</td>
<td>
Password* <i class="smallprint">Between 6 and 32 characters, using at least one letter and one number</i><br />
<b class="error" id="passwordError">Error: Please enter a valid password</b>
</td>
</tr>
<tr>
<td>
<input type="password" maxlength="32" width="32" name="regTxtPasswordConf">
</td>
<td>
Confirm Password*<br />
<b class="error" id="passwordConfError">Error: Both email passwords must match</b>
</td>
</tr>
</table>
<br />
<div class="textCenter">
<input type="checkbox" class="center" name="regChkTos"> - Check this box if you agree to the Terms of Service. You must agree in order to regster.
<br />
<br />
<input type="submit" name="regSubmit" value="Register">
</div>
</form>
JS:
<script type="text/javascript">
function validateForm()
{
var noError = true;
if (!validateUserName())
{
noError = false;
}
if (!validateFName())
{
noError = false;
}
if (!validateSName())
{
noError = false;
}
if (!validateEmail())
{
noError = false;
}
if (!validateConfirmEmail())
{
noError = false;
}
if (!validatePassword())
{
noError = false;
}
if (!validateConfirmPassword())
{
noError = false;
}
return noError;
}
function validateUserName()
{
var userName = document.forms["registerForm"]["regTxtUsrName"];
var regex = /^\w+$/;
if (userName.value==null || userName.value=="" || userName.value.length < 6 || !regex.test(userName.value))
{
userName.style.border = "2px solid red";
document.getElementById('userNameError').style.display="inline";
return false;
}
else
{
userName.style.border = "2px solid #0f0";
document.getElementById('userNameError').style.display="none";
return true;
}
}
function validateFName()
{
var name = document.forms['registerForm']['regTxtFName'];
if (name.value == null || name.value == '')
{
name.style.border = "2px solid red";
document.getElementById('fNameError').style.display="inline";
return false;
}
else
{
name.style.border = "2px solid #0f0";
document.getElementById('fNameError').style.display="none";
return true;
}
}
function validateSName()
{
var name = document.forms['registerForm']['regTxtSName'];
if (name.value == null || name.value == '')
{
name.style.border = "2px solid red";
document.getElementById('sNameError').style.display="inline";
return false;
}
else
{
name.style.border = "2px solid #0f0";
document.getElementById('sNameError').style.display="none";
return true;
}
}
function validateEmail()
{
noError = true;
var email = document.forms['registerForm']['regTxtEmail'];
var atpos=email.value.indexOf("#");
var dotpos=email.value.lastIndexOf(".");
if (email.value == null || email.value == '')
{
email.style.border = '2px solid red';
document.getElementById('emailError1').style.display='inline';
noError = false;
}
else
{
document.getElementById('emailError1').style.display='none';
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.value.length)
{
email.style.border = '2px solid red';
document.getElementById('emailError2').style.display='inline';
noError = false;
}
else
{
email.style.border = '2px solid #0f0';
document.getElementById('emailError2').style.display='none';
}
}
return noError
}
function validateConfirmEmail()
{
var email = document.forms['registerForm']['regTxtEmail'];
var emailConf = document.forms['registerForm']['regTxtEmailConf'];
if (email.value != emailConf.value)
{
emailConf.style.border = '2px solid red';
document.getElementById('emailConfError').style.display = 'inline';
return false
}
else
{
emailConf.style.border = '2px solid 0f0';
document.getElementById('emailConfError').style.display = 'none';
return true
}
}
function validatePassword()
{
var password = document.forms['registerForm']['regTxtPassword'];
if (password.value == null || password.value == '' || password.value.length < 6 || password.value.search(/\d/) == -1 || password.value.search(/[A-z]/) == -1)
{
password.style.border = '2px solid red';
document.getElementById('passwordError').style.display = 'inline';
return false;
}
else
{
password.style.border = '2px solid 0f0';
document.getElementById('passwordError').style.display = 'none';
return true;
}
}
function validatePasswordConf()
{
var password = document.forms['registerForm']['regTxtPassword'];
var passwordConf = document.forms['registerForm']['regTxtPasswordConf'];
if (password.value != passwordConf.value)
{
passwordConf.style.border = '2px solid red';
document.getElementById('passwordConfError').style.display = 'inline';
return false;
}
else
{
passwordConf.style.border = '2px solid 0f0';
document.getElementById('passwordConfError').style.display = 'none';
return true;
}
}
</script>
Yes, this script is on the HTML page where the form is located. I've left every field blank, clicked submit, the errors pop up temporarily, then action="index.php" is invoked anyway.
Thanks for any help at all.

Answer 1

first you need to know where the bug is.
For that, use console.log on each function.
After, your code can be optimized with a better algorithm and regex.
To know where the problem is check each return of each function.
For the main function I will do somthing like that :
function validateForm(){
if (validateUserName() && validateFName() && validateSName() && validateEmail() && validateConfirmEmail() && validatePassword() && validateConfirmPassword()){
return true;
}
return false;
}
edit : check the value of your main function too.
do you have a link for this page directly ?