Register Form validation using JavaScript
1) indexOf : starting position of Character
if a match is found it returns the position of the character (starting with 0) if not returns -1
2) lastIndexOf: Checks the last position of the Character
if a match is found it returns the position of the character (starting with 0) if not returns -1
3)trim(): Trim functionality removes the white space in input
4) document.getElementById.value : it read/listen the value which are typing in input
Register page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Communication Application</title>
<link rel="stylesheet" href="./Assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./Assets/css/cutom.css">
</head>
<body>
<div class="container registerPage pt-5">
<section>
<div class="registerHeader">
Register
</div>
<script>
function submitHadler() {
var fullName = document.getElementById("fullName").value
var email = document.getElementById("email").value
var atPos = email.indexOf("@");
var dotPos = email.lastIndexOf(".");
var password = document.getElementById("password").value
var Repassword = document.getElementById("Repassword").value
// if (!fullName || !email || !email || !password || !Repassword) {
// return false
// } else
if (fullName == "") {
alert("please Enter you name")
return false
} else if (fullName.trim().length < 4) {
alert("please Enter you Full name");
return false;
} else if (atPos < 2) {
alert("please Enter Proper Email ID");
return false;
} else if (dotPos - atPos < 3) {
alert("please Enter Proper Email ID");
return false;
} else if (password == "") {
alert("please Enter Password");
return false;
} else if (password.trim().length < 5) {
alert("password must contain atleast 5 Characters");
return false;
} else if (Repassword == "") {
alert("please confirmed Enter Password");
return false;
} else if (password != Repassword) {
alert("Passwrod miss match");
return false;
}
}
</script>
<form method="get" onsubmit="return submitHadler()" action="./welcome.html">
<div class="row mb-3 mt-5">
<label for="inputEmail3 " class="col col-sm-5 col-form-label ">Full Name</label>
<div class="col col-sm-3 ">
<input type="text" class="form-control " id="fullName">
</div>
</div>
<div class="row mt-4 ">
<label for="inputEmail3 " class=" col col-sm-5 col-form-label ">Email</label>
<div class=" col col-sm-3 ">
<input type="text" class="form-control " id="email">
</div>
</div>
<div class="row mt-4 ">
<label for="inputPassword3 " class="col-sm-5 col-form-label ">Password</label>
<div class="col col-sm-3 ">
<input type="password" class="form-control " id="password">
</div>
</div>
<div class="row mt-4 ">
<label for="inputPassword3 " class="col-sm-5 col-form-label ">Confirm Password</label>
<div class="col col-sm-3 ">
<input type="password" class="form-control " id="Repassword">
</div>
</div>
<div class="row mt-5 ">
<div class="col col-sm-7 ">
<button type="submit" class="btn text-left light_blueBtn">Register</button>
</div>
</div>
</form>
</section>
</div>
<script src="./Assets/js/jquery.min.js "></script>
<script src="./Assets/js/bootstrap.min.js "></script>
<script src="./Assets/js/custom.js "></script>
</body>
</html>
</html>
OutPut
Comments
Post a Comment