JS Form Validation with Custom Validation Code
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<title> REGISTRATION FORM</title>
<script type="text/javascript" src="valid.js" ></script>
</head>
<body>
<div class="container">
<div class="row">
<h1 class="text-center text-success">BOOTSTRAP FORM USING JS CUSTOM VALIDATION</h1>
<div class="col-md-6 m-auto" >
<form name="Registrationform" action="" method="post" onsubmit="return validation();">
<div class="form-group mt-5">
<label for="NAME">Name</label>
<input type="text" name="Name" class="form-control">
</div>
<div class="form-group mt-3">
<label for="EMAIL">Email</label>
<input type="email" name="Email" class="form-control">
</div>
<div class="form-group mt-3">
<label for="Password">Password</label>
<input type="password" name="Password" class="form-control">
</div>
<div class="form-group mt-3">
<label for="phonenumber">Phone Number</label>
<input type="number" name="Phonenumber" class="form-control">
</div>
<div class="form-group mt-3">
<label for="city">City</label>
</div>
<select class="form-select mt-3">
<option selected>Please select your City</option>
<option>Ludhiana</option>
<option>Jalandhar</option>
<option>Phagwara</option>
</select>
<div class="form-group mt-3" >
<label for="gender">Gender</label>
</div>
<div class="form-check-inline">
<input type="radio" name="gender" class="form-check-input">
<label for="male">Male</label>
</div>
<div class="form-check-inline">
<input type="radio" name="gender" class="form-check-input">
<label for="gender">Female</label>
</div>
<div class="form-group mt-3">
<label for="hobby">HOBBY</label>
</div>
<div class="form-check">
<input class="form-check-input" name="hobby[]" type="checkbox" checked>
<label for="cricket">Cricket</label>
</div>
<div class="form-check">
<input class="form-check-input" name="hobby[]" type="checkbox">
<label for="cricket">Movies</label>
</div>
<div class="form-check">
<input class="form-check-input" name="hobby[]" type="checkbox">
<label for="cricket">Football</label>
</div>
<div class="form-group mt-3">
<label for="dob">DOB</label>
</div>
<div class="form-group">
<input class="form-control" type="date" name="dob">
</div>
<div class="form-group text-center mt-3" >
<button type="submit" class="btn btn-success btn-lg px-5 border-0 rounded-0 " value="SUBMIT" >SUBMIT</button>
</div>
</form>
</div></div></div>
</body>
</html>
VALID.JS CODE
function validation()
{
var Name=document.Registrationform.Name;
var Email=document.Registrationform.Email;
var Password=document.Registrationform.Password;
var CPassword=document.Registrationform.CPassword;
var Phonenumber=document.Registrationform.Phonenumber;
var City=document.Registrationform.City;
var Gender=document.Registrationform.Gender;
var Hobby=document.Registrationform.Hobby;
var dob=document.Registrationform.dob;
if(Name.value==""){
alert("Please Enter Your Name.");
Name.focus();
return false;
}
if(Email.value==""){
alert("Please Enter Your Email.");
Email.focus();
return false;
}
if(Password.value==""){
alert("Please Enter Your Password.");
Password.focus();
return false;
}
if(Password.value.length<5)
{
alert("Enter more than 5 characters");
Password.focus();
return false;
}
if(CPassword.value==""){
alert("Please Confirm your password.");
CPassword.focus();
return false;
}
if(Password.value!=CPassword.value){
alert("Please enter same password");
CPassword.focus();
return false;
}
if(Phonenumber.value==""){
alert("Please Enter Your Phone Number.");
Phonenumber.focus();
return false;
}
if(isNaN(Phonenumber.value))
{
alert("Please enter only digits in number");
Phonenumber.focus();
return false;
}
if(City.selectedIndex < 1){
alert("Please select your City");
return false;
}
if((Gender[0].checked== false)&&(Gender[1].checked== false))
{
alert("Please select your Gender");
return false;
}
if((Hobby[0].checked== false)&&(Hobby[1].checked== false)&&(Hobby[2].checked== false)&&(Hobby[3].checked== false))
{
alert("Please select your Hobby");
return false;
}
if(dob.value==""){
alert("Please Enter Your Dateof birth.");
dob.focus();
return false;
}
return true;
}
