CODEWITHSUNDEEP
javascripthtmlvalidation
AL1ENB0Y
AL1ENB0Y

Reputation: 15

How to redirect after form validation?

I'm trying to set up a redirect after my form validation script runs. But when I click submit it throws my requires a valid email error and then redirects skipping my validation checks.

Currently I've tried adding the function in at the bottom of my js file. But it redirects with out running the validations. 

HTML
<button class="popup-button" onclick="openForm()">Open Form</button>
<div class="form-popup" id="form">
<form id="form" onsubmit="return formValidate(event)">
<p>
<input type="text" id="e-mail" placeholder="Email" />
</p><p>
<input type="password" id="pswd" placeholder="Password" />
</p>
<br>
<input id="submitButton" type="submit" class="submit" 
onclick="redirect()">
 <br>
<button type="button" class="btn cancel" 
onclick="closeForm()">Close</button>
</form>

JS
  function formValidate(event) {
event.preventDefault();
var form = document.getElementById('form');
var email = document.getElementById('e-mail').value;
var password = document.getElementById('pswd').value;

var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

var emailResult = emailRGEX.test(email);
//validate Email
if(emailResult == false){
alert("Please enter a valid email address");
return false;
}

//validate lower case
var lowerCaseLetters = /[a-z]/g;
if(password.match(lowerCaseLetters) == null) {
  alert("Password needs a lower case!");
  return false;
}

//validate upper case
var upperCaseLetters = /[A-Z]/g;
if(password.match(upperCaseLetters) == null){
  alert("Password needs an upper case!");
  return false;
}

//validate numbers
var numbers = /[0-9]/g;
if(password.match(numbers) == null){
  alert("Password needs a number!");
  return false;
}
//validate special characters
 var special = /[!@#$%^&*(),.?":{}|<>]/g;
 if(password.match(special) == null){
alert("Password needs a special character!");
return false;
}
 //validate password length
 if(password.length<8) {
alert("Password needs to be at least 8 characters");
return false;
}

form.submit();

 }
function redirect(){
window.location.href="thankyou.html";
}

I expect the form to redirect to my thankyou.html page after running the validation checks.

Upvotes: 1

Views: 4308

Answers (2)

Vijaya Varma Lanke
Vijaya Varma Lanke

Reputation: 621

<!DOCTYPE html>
<html>
<head>
<script>
 function validateForm() {
 var x = document.forms["myForm"]["fname"].value;
 if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<form name="myForm" action="b.html" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>

Please find the given example.

And make sure that your b.html is also in same folder. If you want to call another html from javascript then use window.location.href = url; after successful validation.

Hope this will help you. Thank you

Upvotes: 2

Andrew Daly
Andrew Daly

Reputation: 537

Put the redirect in the validation function before form.submit

Upvotes: 0

Related Questions