validation is not done on submit button click

Question

<script>
function ValidateEmail(){
    var emailID = document.getElementById("email").value;
	var email = document.getElementById("email");
	var emailRegexp=/^[a-z]+\w+([\.-]?\w+)*@[a-z]+\w+([\.-]?\w+)*(\.[a-z]{2,3})+$/i;

    if ((emailID==null)||(emailID=="")){
      //  alert("Please Enter your Email ID");
		email.style.borderColor="red";
		document.getElementById("err").innerHTML = "Please Enter your Email ID";
        emailID.focus();
        return false;
    }
	else
 if (!emailRegexp.test(emailID)){
	//alert("Please Enter valid Email ID");
	email.style.borderColor="red";
	document.getElementById("err").innerHTML = "Please Enter valid Email ID";
	emailID.focus();
return false;
	}
	else
	{
		email.style.borderColor="#e1e1e1";
		document.getElementById("err").innerHTML ="";
		return true;
	}

 }

 function validUsername()
{
	var error = "";
	var illegalChars = /\W/; // No special Characters allowed
	var fd =document.getElementById("name");

	if (fd.value == "" || fd.value == null)
	{
		fd.style.borderColor = 'Red';
		document.getElementById("UserErr").innerHTML = " Field is left Blank.\n";
		return false;
	}
	else if ((fd.value.length < 5) || (fd.value.length > 20)) // Number of Character entered is checked
	{
		fd.style.borderColor = 'Red';
		document.getElementById("UserErr").innerHTML = "Username is should be in a range of 5 and 15..\n";
		return false;
	}
	else if (illegalChars.test(fd.value)) // check for illegal characters
	{
		fd.style.borderColor = 'Red';
		document.getElementById("UserErr").innerHTML = "Illegal Characters not allowed\n";
		return false;
	} 
	else
	{
		fd.style.borderColor = '#e1e1e1';
		document.getElementById("UserErr").innerHTML = "";
		return true;
	}
}

function validPassword()
{
	var error = "";
	var password=document.getElementById("pass");
	var passError=document.getElementById("PassErr");
	var illegalChars = /[\W_]/; // Numbers and letter only
	var checkPass=/\w*[a-z]+\d+\w*/i;

	if (password.value == "" || password.value == null)
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Field Cannot be blank.\n";
		return false;
	}
	else if ((password.value.length < 8) || (password.value.length > 20)) // Checks length of the password
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Length should be in Range of 8 to 20. \n";
		return false;
	}
	else if (illegalChars.test(password.value))
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Illegal characters not allowed.\n";
		return false;
	}
	else if (!checkPass.test(password.value)) // Checks for numeric value  in entered password
	{
		password.style.borderColor = 'Red';
		passError.innerHTML = "Atleast one Numeric value Required ";
		return false;
	}
	else 
	{
		password.style.borderColor = '#e1e1e1';
		passError.innerHTML = "";
		return true;
	}
}

function validateOnSubmit()
{
	if(ValidateEmail() && validUsername() && validPassword());
		return true;
		
		return false;
}
</script>

<form method="post" name="form">
<!--<input type="text" name="email" id="email" placeholder="Your Email" onblur="return ValidateEmail()"/><span id="err"></span></td>-->
<table align="center" width="30%" border="0">
<tr>
<td><input type="text" name="uname" id="name" placeholder="User Name" onblur="validUsername()"/><span id="UserErr" style="color:red"></span></td>
</tr>
<tr>
<td><input type="text" name="email" id="email" placeholder="Your Email" onblur="ValidateEmail()"/><span id="err"></span></td>
</tr>
<tr>
<td><input type="password" name="pass" id="pass" placeholder="Your Password" onblur="validPassword()" /><span id="PassErr" style="color:red"></span></td>
</tr>
<tr>
<td><button type="submit" onsubmit="return validateOnSubmit()" name="btn-signup">Sign Me Up</button></td>
</tr>
</table>
</form>

I have created registration form and create validation in JavaScript for input fields.

onBlur validation is done, and works fine.

But when I click on the 'Sign Me Up' button, validation is not done and data is inserted into the database. Please I need help.

Answer 1

"emailID.focus(); " is wrong is in ValidateEmail() function. instead of it "email.focus(); is right. Now it works fine as i expected.

but there is no need of this so i removed it.

Answer 2

submit events fire on forms, not submit buttons. Move the onsubmit attribute to the <form> start tag.