Question posted in 
Eg- If the user starts typing the password but has not entered email yet instantly display the message – “Enter Email Id First”.
I am using bootstrap4 & jQuery/Javascript.The cursor should reach that field where error is found.Along with that when all the validations are met, how do I redirect to another page when I click the Submit Button. I have tried using anchor tags in HTML for redirection on click of the button which obviously results in redirecting to the link rather than checking validations. I have tried using window.location method but it doesn’t give any response.
<!DOCTYPE html>
<html>
<head>
<title>Three Forms</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body style="background-color : grey">
<div class="container" style="background-color: green;padding-bottom: 2%;">
<div style="background-color:black;">
<h2><b>Forms</b></h2>
</div>
<div class="row" style="margin-top:3%;">
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left: 4%;margin-right: 3%;margin-bottom:3%;">
<form class="form-A" id="form-A">
<div style="background: linear-gradient(to top left, #ff9999 0%, #ff9966 35%); height: 100px; text-align : center; color:white;">
<h3><b>Log In</b></h3>
<a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i></a>
<a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a>
<a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a>
</div>
<div style="padding: 4%;">
<div class="form-sm">
<input type="Email" id="email1" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="form-sm">
<input type="Password" id="password1" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-right mt-4">
<a class="btn btn-link" href="https://www.google.com" style="color:grey;font-size:normal;">Forgot Password?</a>
</div>
<div class="text-left mt-4" style="font-size:8px;font-weight: normal;">
<button class="btn btn-primary" id="login" style="Background-color:grey; border-radius:25px;" onclick="return form1validations() ">
Log In<i class="fa fa-paper-plane-o ml-1"></i></button>
<span style="color:grey;">Don't have an account?</span>
<a class="btn btn-link" href="Sign Up" style="text-align : Right;color:black; font-size:10px;">Sign up?</a>
</div>
<div class="pb-4"></div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;padding:0px;margin-left:4%;margin-right:3%;margin-bottom:3%;">
<form id="form-B" style="padding-left:4%;padding-right:3%;margin-left:-4%;margin-right:-3%;">
<h3 style="color:#cc00cc;text-align : center;"><b>Sign Up</b></h3>
<div class="md-form form-sm" style="padding: 3%;">
<div class="mb-5"></div>
<input type="Email" id="email2" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="md-form form-sm" style="padding: 3%;margin-top:-6%">
<input type="Password" id="password2" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-left mt-4" style="color:grey;font-size:15px;font-weight: normal;">
<input type="checkbox" id="checkbox" style="color:grey;font-size:15px;font-weight: normal;"> Accept the<a href="https://amazon.com">Terms and Conditions</a>
</div>
<div class="text-left mt-4" style="font-size:9px;font-weight: normal;">
<button class="btn btn-primary" id="signup" style="background-color : DeepPink;border-radius:25px;" onclick="return form2validations()">Sign Up
<i class="fa fa-paper-plane-o ml-1"></i></button>
<span style="color:grey;">have an account?</span>
<a class="btn btn-link" href="Log In" style="text-align : Right; font-size:9px;">Log In?</a>
</div>
<div class="mb-4"></div>
<div style="background: linear-gradient(to top, #666699 100%, #666699 0%); height: 100px; text-align : center; color:white;"><br><br>
<a href="https://www.facebook.com"><i class="fa fa-facebook" style="color:white;"></i>
</a><a href="https://twitter.com"><i class="fa fa-twitter" style="color:white;"></i></a>
<a href="https://plus.google.com"><i class="fa fa-google-plus" style="color:white;"></i></a>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-6 col-md-3" style="background-color:white;margin-left: 4%;margin-right:3%;padding:top:0.5%;margin-bottom:3%; ">
<form id="form-C">
<h3 style="text-align : center;"><b>Sign In </b></h3>
<div class="md-form form-sm" style="padding-top:1%;">
<div class="mb-5"></div>
<input type="Email" id="email3" class="form-control form-control-sm" placeholder="Your Email">
</div>
<div class="mb-2"></div>
<div class="md-form form-sm">
<input type="Password" id="password3" class="form-control form-control-sm" placeholder="Your Password">
</div>
<div class="text-right mt-4">
<a class="btn btn-link" href="https://www.gmail.com">Forgot Password?</a>
</div>
<div class="text-center p-4">
<button class="btn btn-primary" id="signin" style="width : 85%;border-radius:25px;" onclick="return form3validations()">Sign In
<i class="fa fa-paper-plane-o ml-1"></i>
</button>
</div>
<div style="color:grey;text-align : center;font-size:15px;">or sign in with:</div>
<div class="mb-2"></div>
<div style="text-align:center;color:Blue;">
<a href="https://www.facebook.com" class="btn btn-link" style="background-color: lightgrey;width:15%;
border-radius:25%;" role="button">
<i class="fa fa-facebook"></i></a>
<a href="https://www.twitter.com" class="btn btn-link" style="background-color:lightgrey;width:15%;
border-radius:25%;" role="button">
<i class="fa fa-twitter"></i></a>
<a href="https://www.plus.google.com" class="btn btn-link" style="background-color: lightgrey;width:15%;
border-radius:25%;" role="button"><i class="fa fa-google-plus"></i></a>
</div>
</form>
</div>
</div>
<div class="mb-3"></div>
<script>
function form1validations() {
var email1 = document.getElementById("email1").value;
var password1 = document.getElementById("password1").value;
var mail1 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd1 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email1.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email1.match(mail1)) {
return;
} else if (password1.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password1.match(pswd1)) {
alert('password is incorrect!')
return false;
} else {
alert('you are sucessfully Logged in!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
function form2validations() {
var email2 = document.getElementById("email2").value;
var password2 = document.getElementById("password2").value;
var mail2 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd2 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email2.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email2.match(mail2)) {
return;
} else if (password2.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password2.match(pswd2)) {
alert('password is incorrect!')
return false;
} else if (!document.getElementById('checkbox').checked) {
alert('Checkbox not checked');
return false;
} else {
alert('Sign Up successful!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
function form3validations() {
var email3 = document.getElementById("email3").value;
var password3 = document.getElementById("password3").value;
var mail3 = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var pswd3 = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
if (email3.length == 0) {
alert('email cannot be empty!');
return;
} else if (!email3.match(mail3)) {
return;
} else if (password3.length == 0) {
alert('password cannot be empty!');
return false;
} else if (!password3.match(pswd3)) {
alert('password is incorrect!')
return false;
} else {
alert('you are sucessfully Signed In!');
}
window.location.href = "/home/user/Shivam/newpage.html";
}
</script>
</body>
</html>
2
Answers
Take a look at the below snippet where I have added validations when you focus on input field. Works fine check for form1. I had to remove the focus in your validation function else it will get stuck in loop. Also I suggest you create separate validation when input is focussed and when form is submitted.
I have made a simple form for you that does the work.
I have used
Element.scrollTo()method to show the user which field is required.