3

<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.

6

2 Answers 2

6

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

Sign up to request clarification or add additional context in comments.

6 Comments

You are right ! And what the goal of the keyword "return" in the onsubmit ? As I know, we just have to pass a function to the attribute, no ?
@Tata2 — The value of the attribute is a function body. The return value cancels the default event (or doesn't, depending on what it is).
if(ValidateEmail() && validUsername() && validPassword()); <-- typo
i have removed 'return' keyword but still have same problem
@Sudip977 — Removing the return keyword will definitely stop it from working.
|
0

"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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.