I have an HTML form and I'm using javascript to validate it. I want
- if the validation is successful -> auto redirect to another page.
- if the validation fails -> still stay on the form page (for user enter again). Just using javascript, how can I do it?
Here is my code
<html>
<head>
<script type="text/javascript">
function verifyNull() {
if (!document.getElementById('username').value.trim().length) {
alert('Please enter username');
}
else if (!document.getElementById('password').value.trim().length) {
alert('Please enter password');
}
}
function verifyEmail() {
var x = document.getElementById('email').value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
<title>Bài 2</title>
</head>
<body>
<form name = "myForm" method = "post" action = "registerd.html">
Username <input type = "text" id = "username" name = "username"/><br />
Password <input type = "password" id = "password" name = "password" /> <br />
Email <input type = "text" id = "email" name = "email"/>
<input type = "submit" value = "Submit" onClick = "verifyNull();verifyEmail();"/>
</form>
</body>
</html>
I have an HTML form and I'm using javascript to validate it. I want
- if the validation is successful -> auto redirect to another page.
- if the validation fails -> still stay on the form page (for user enter again). Just using javascript, how can I do it?
Here is my code
<html>
<head>
<script type="text/javascript">
function verifyNull() {
if (!document.getElementById('username').value.trim().length) {
alert('Please enter username');
}
else if (!document.getElementById('password').value.trim().length) {
alert('Please enter password');
}
}
function verifyEmail() {
var x = document.getElementById('email').value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
<title>Bài 2</title>
</head>
<body>
<form name = "myForm" method = "post" action = "registerd.html">
Username <input type = "text" id = "username" name = "username"/><br />
Password <input type = "password" id = "password" name = "password" /> <br />
Email <input type = "text" id = "email" name = "email"/>
<input type = "submit" value = "Submit" onClick = "verifyNull();verifyEmail();"/>
</form>
</body>
</html>
3 Answers
Reset to default 3Generally, if the validation is successful the validating function should return true, and if validations fails, return false.
function perform()
{
if(isValid)
{
return true;
}
else
{
return false;
}
}
In your above code, the method verifyNull() and verifyEmail() should return true or false. Change the code as follows, and call the validate() method onsubmit of the form.
Remove the onclick event from the submit button and add an onsubmit event to the form.
<form name="myForm" action="registerd.html" onsubmit="return validate()">...</form>
function validate()
{
return (verifyNull() && verifyEmail());
}
function verifyNull(){
var isValid = true;
if(!document.getElementById('username').value.trim().length){
isValid = false;
alert('Please enter username');
}
else if(!document.getElementById('password').value.trim().length){
isValid = false;
alert('Please enter password');
}
return isValid;
}
function verifyEmail(){
var x = document.getElementById('email').value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
return true;
}
Use an if else statement. Assuming there's a variable to tell you whether validation passed, called formValidation:
if(formValidation === true) {
window.open("path/to/page.html", "_self");
} else {
// Do something else (the validation failed)
}
To give a more detailed answer (if you want one) then you need to provide more code.
HTML:-
<form onsubmit="return validation()">
.....
</form>
JavasScript:-
<script>
function validation() {
var isValid = true;
//perform your validation on form and update isValid variable accordingly.
if(isValid) {
window.location = ''; // your desired location
}
return false; // always return false to prevent form from submission.
}
</script>