Form Validation Using RegEx
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tinyone</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h2>Create Account Form</h2>
<form action="" name="Registration">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="checkemail">Please Enter Proper Email ID</label>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
<label for="checkpwd">PassWord Length Should be atleast 8 characters longer</label>
</div>
<div class="form-group">
<label for="Mobile">Phone Number:</label>
<input type="Mobile" class="form-control" id="mobile" placeholder="Enter Mobile Number " name="mob">
<label for="checkmob">Enter Proper Mobile Number</label>
</div>
<button type="button" class="btn btn-default save">Submit</button>
</form>
<div id="result">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="js/app.js"></script>
</body>
</html>app.js file
var mybtn = document.querySelector(".save");
mybtn.addEventListener("click",validate)
function validate(){
var email = document.getElementById("email").value;
var isValidate = 0;
var pass = document.getElementById("pwd").value;
var mob = document.getElementById("mobile").value;
var pattermail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
if(!email.match(pattermail)){
document.querySelector("label[for='checkemail']").style= "display:block";
isValidate += 1;
}
if(pass.length < 8){
document.querySelector("label[for='checkpwd']").style= "display:block";
isValidate += 1;
}
var patternmob = /^[0-9]{10}$/;
if(!mob.match(patternmob)){
document.querySelector("label[for='checkmob']").style= "display:block";
isValidate += 1;
}
if(isValidate==0){
document.getElementById("#result").innerHTML = "<h3>Account Successfully Created and Confirmation Mail Sent at"+email+"</h3>";
}else{
document.getElementById("#result").innerHTML = "<h3>Please Check All Fields</h3>";
}
}
style.css file
label[for="checkemail"] {
color: red;
display: none;
}
label[for="checkpwd"] {
color: red;
display: none;
}
label[for="checkmob"] {
color: red;
display: none;
}
h2 ,h3{
text-align: center;
}
