How to Make JavaScript Client side form Validation
hello viewer, in this article I will how make JavaScript client site form validation. two types of form validation one is client side and another one is server side. in this article I will teach you client site form validation.
first question in your mind generate why I used form validation it’s necessary or not?
How to Make jQuery client side form validation
so, don’t worry I will explain you why we are using form validation. generally, you are browsing multiple websites in internet. but some website has form validation and some are maybe not. what is different in both website with form validation and without form validation. so, I will tell you what is different.
when I create form with validation. then I have not received any unnecessary request for client side. and when we are not use form validation. then we have received multiple unnecessary requested. you can say another word. when you are received correct data from client side then you used form validation in your form.
JavaScript Shopping Cart Tutorial for Beginners | Add To Cart
copy the below code and paste in your html document
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple HTML Form</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/form.js"></script>
</head>
<body>
<form name="Form" onsubmit="return validateForm()" >
<h2>Registration Form</h2>
<div class="box">
<label>Full Name</label>
<input type="text" name="name" id="name">
<div class="error" id="nameErr"></div>
</div>
<div class="box">
<label>Email Address</label>
<input type="text" name="email" id="email">
<div class="error" id="emailErr"></div>
</div>
<div class="box">
<label>Mobile Number</label>
<input type="text" name="mobile" maxlength="10" id="mobile">
<div class="error" id="mobileErr"></div>
</div>
<div class="box">
<label>Country</label>
<select name="country" id="country">
<option>Select</option>
<option>London</option>
<option>India</option>
<option>America</option>
</select>
<div class="error" id="countryErr"></div>
</div>
<div class="box">
<label>Gender</label>
<div class="form-inline" id="gender">
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</div>
<div class="error" id="genderErr"></div>
</div>
<div class="box">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>copy the below code and paste in your CSS document
CSS Code
body {
font-size: 16px;
font-family: system-ui;
background:-webkit-radial-gradient(top left, #90F6FB,#2C3283);
}
.form{
width: 100%;
}
h2 {
text-align: center;
color: #ef6e58;
}
form {
width: 300px;
padding: 15px 40px 40px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
margin: 4% auto;
}
label {
display: block;
margin-bottom: 5px
}
label i {
color: #999;
font-size: 80%;
}
input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
background-color: #a9bae64a;
}
.box {
padding-bottom: 10px;
}
.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}
.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}
.error {
color: red;
font-size: 90%;
}
input[type=text]{
outline: none;
}
input[type="submit"] {
font-size: 110%;
font-weight: 100;
background: #ef6e58;
border-color: #ef6e58;
box-shadow: 0 3px 0 #bd432e;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #bd432e;
border-color: #bd432e;
}
.input-1{
background-image: url(../images/check.png);
background-repeat: no-repeat;
background-position: right 10px center;
border:1px solid #01cc40;
}
.input-2{
background-image: url(../images/cancel.png);
background-repeat: no-repeat;
background-position: right 10px center;
border:1px solid red;
}
.input-3{
border:1px solid #01cc40!important;
}
select{
outline: none!important;
}
.input-4{
border:1px solid red;
}copy the below code and paste in your JavaScript document
JavaScript Code
function printError(Id, Msg) {
document.getElementById(Id).innerHTML = Msg;
}
function validateForm() {
var name = document.Form.name.value;
var email = document.Form.email.value;
var mobile = document.Form.mobile.value;
var country = document.Form.country.value;
var gender = document.Form.gender.value;
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") {
printError("nameErr", "Please enter your name");
var elem = document.getElementById("name");
elem.classList.add("input-2");
elem.classList.remove("input-1");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Please enter a valid name");
var elem = document.getElementById("name");
elem.classList.add("input-2");
elem.classList.remove("input-1");
} else {
printError("nameErr", "");
nameErr = false;
var elem = document.getElementById("name");
elem.classList.add("input-1");
elem.classList.remove("input-2");
}
}
if(email == "") {
printError("emailErr", "Please enter your email address");
var elem = document.getElementById("email");
elem.classList.add("input-2");
elem.classList.remove("input-1");
} else {
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
var elem = document.getElementById("email");
elem.classList.add("input-2");
elem.classList.remove("input-1");
} else{
printError("emailErr", "");
emailErr = false;
var elem = document.getElementById("email");
elem.classList.add("input-1");
elem.classList.remove("input-2");
}
}
if(mobile == "") {
printError("mobileErr", "Please enter your mobile number");
var elem = document.getElementById("mobile");
elem.classList.add("input-2");
elem.classList.remove("input-1");
} else {
var regex = /^[1-9]\d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Please enter a valid 10 digit mobile number");
var elem = document.getElementById("mobile");
elem.classList.add("input-2");
elem.classList.remove("input-1");
} else{
printError("mobileErr", "");
mobileErr = false;
var elem = document.getElementById("mobile");
elem.classList.add("input-1");
elem.classList.remove("input-2");
}
}
if(country == "Select") {
printError("countryErr", "Please select your country");
var elem = document.getElementById("country");
elem.classList.add("input-4");
elem.classList.remove("input-3");
} else {
printError("countryErr", "");
countryErr = false;
var elem = document.getElementById("country");
elem.classList.add("input-3");
elem.classList.remove("input-4");
}
if(gender == "") {
printError("genderErr", "Please select your gender");
var elem = document.getElementById("gender");
elem.classList.add("input-4");
elem.classList.remove("input-3");
} else {
printError("genderErr", "");
genderErr = false;
var elem = document.getElementById("gender");
elem.classList.add("input-3");
elem.classList.remove("input-4");
}
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
return false;
}
};if you have any problem to understand this code then you also watch video tutorials
