Form Validations in JavaScript
Data Validation means checking whether the data inserted by the user is right or wrong means you asked the user to insert a name but the user inserted a number in the place of a name. We have two types of Form Validations in JavaScript server-side validation and client-side validation. In server-side validation first, we get data from the server and then we check that data on the server itself. In client-side validation this validation we performed in the web browser.
Now let us create a form in html file.
For Free Demo classes Call: 020-71172977
Registration Link: Click Here!
HTML Form Structure
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Form validation</title>
</head>
<body>
<h1>Registration form</h1>
<form action=”registration.png” name=”myForm” onsubmit=”return validateForm()”>
<h1>Registration form</h1>
<div class=”formdesign” id=”name”>
Name: <input type=”text” name=”fname” required placeholder=”Enter Your Full Name”/><b>
<span class=”formerror”></span> </b>
</div>
<div class=”formdesign” id=”email”>
Email: <input type=”email” name=”femail” required placeholder=”email@domain.com”/><b>
<span class=”formerror”></span> </b>
</div>
<div class=”formdesign” id=”phone”>
Phone No.: <input type=”” name=”fphone” required placeholder=”Enter Your 10 digit phone no.”/><b>
<span class=”formerror”></span> </b>
</div>
<div class=”formdesign” id=”pass”>
Password: <input type=”password” name=”fpass” required placeholder=”Enter Your unique password”/><b>
<span class=”formerror”></span> </b>
</div>
<div class=”formdesign” id=”cpass”>
Confirm Password: <input type=”password” name=”fcpass” required placeholder=”Please confrim you password”/><b>
<span class=”formerror”></span> </b>
</div>
<input class=”but” type=”submit” value=”Submit”>
</form> </body>
</html>
In Html5 we will also get some validation like email validation by using this validation user only allow to enter valid email. And if want to handle this validation manually this thing we will do by using JS. Master the art of creating captivating user interfaces with with SevenMentor’s Front End Development Course in Pune. In form action= “” here we put the location of file were our form will save
In form name = “” here we put name of our form
In form onsubmit = “return validateForm()” By this, we are saying that when we get validateForm value true then only submit my form.
In form method = “” here we put what method we are using whether it is get or post
In input filed the holder will display what data we have to enter in a particular field.
In input filed Required by this we are saying that this is required
CSS Code
Explore CSS Variable in detail.
<!– internal CSS –>
<style>
body {
padding: 10px 50px;
}
.formdesign {
font-size: 20px;
}
.formdesign input {
width: 50%;
padding: 12px 20px;
margin: 14px;
border: 1px solid aqua;
border-radius: 4px;
font-size: 15px;
}
.formerror {
color: red;
}
.but {
padding: 17px 40px;
border-radius: 50px;
cursor: pointer;
border: 0;
background-color: rgb(245, 224, 224);
box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 15px;
transition: all 0.5s ease;
}
.but:hover {
letter-spacing: 3px;
background-color: hsl(170, 80%, 48%);
color: hsl(0, 2%, 28%);
box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
}
.but:active {
letter-spacing: 3px;
background-color: hsl(261deg 80% 48%);
color: hsl(0, 0%, 100%);
box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
transform: translateY(10px);
transition: 100ms;
}
form{
background-color: lightskyblue;
width: 400px;
padding: 50px 40px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
box-shadow: 20px 80px 30px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
input{
display: flex;
}
</style>
For Free Demo classes Call: 020-71172977
Registration Link: Click Here!
JS Code
<script>
function clearErrors(){
errors = document.getElementsByClassName(‘formerror’);
for(let item of errors)
{
item.innerHTML = “”;
}
}
function seterror(id, error){
//sets error inside tag of id
element = document.getElementById(id);
element.getElementsByClassName(‘formerror’)[0].innerHTML = error;
}
function validateForm(){
var returnval = true;
clearErrors();
//perform validation and if validation fails, set the value of returnval to false
var name = document.forms[‘myForm’][“fname”].value;
if (name.length<5){
seterror(“name”, “*Length of name is too short”);
returnval = false;
}
if (name.length == 0){
seterror(“name”, “*Length of name cannot be zero!”);
returnval = false;
}
var email = document.forms[‘myForm’][“femail”].value;
if (email.length>15){
seterror(“email”, “*Email length is too long”);
returnval = false;
}
var phone = document.forms[‘myForm’][“fphone”].value;
if (phone.length != 10){
seterror(“phone”, “*Phone number should be of 10 digits!”);
returnval = false;
}
var password = document.forms[‘myForm’][“fpass”].value;
if (password.length < 6){
seterror(“pass”, “*Password should be atleast 6 characters long!”);
returnval = false;
}
var cpassword = document.forms[‘myForm’][“fcpass”].value;
if (cpassword != password){
seterror(“cpass”, “*Password and Confirm password should match!”);
returnval = false;
}
return returnval;
}
</script>
We will put the error part in JS
function clearErrors(){
errors = document.getElementsByClassName(‘formerror’);
for(let item of errors)
{
item.innerHTML = “”;
}
In JS by the help of above code we are clearing the previous errors means when we correct the input value in the form then the error which we are receiving will remove.
For Free Demo classes Call: 020-71172977
Registration Link: Front End Development Training in Pune!
function seterror(id, error){
//sets error inside tag of id
element = document.getElementById(id);
element.getElementsByClassName(‘formerror’)[0].innerHTML = error;
}
In JS by the help of above code element = document.getElementById(id); here we are getting the element by the help of id and saving it in a variable name element
In JS by the help of above code
element.getElementsByClassName(‘formerror’)[0].innerHTML = error; here we are passing the value that we want to display when we receive error in form
function validateForm(){
var returnval = true;
//perform validation but is the validation fails then set returnval to false
var name = document.forms[‘myForm’] [“fname”].value;
if (name.length<5){
seterror(“name”, “*Length of name is too short”);
returnval = false;
}
In JS by the help of above code var returnval = true; by this we are saying that here value is true means we can submit the form.
In JS by the help of above code var name = document.forms[‘myForm’] [“fname”].value; by this we are saying that we want myForm from document and for that myForm we want fname value.
if (name.length == 0){
seterror(“name”, “*Length of name cannot be zero!”);
returnval = false;
}
In JS by the help of above code we are telling the name should not be of Zero length
var email = document.forms[‘myForm’][“femail”].value;
if (email.length>15){
seterror(“email”, “*Email length is too long”);
returnval = false;
}
In JS by the help of above code we are checking the length of email and is the length of email is larger than 15 then it will show error.
var phone = document.forms[‘myForm’][“fphone”].value;
if (phone.length != 10){
seterror(“phone”, “*Phone number should be of 10 digits!”);
returnval = false;
}
For Free Demo classes Call: 020-71172977
Registration Link: Click Here!
In JS by the help of above code we are checking the length of phone number and the length should be 10
var password = document.forms[‘myForm’][“fpass”].value;
if (password.length < 6){
seterror(“pass”, “*Password should be atleast 6 characters long!”);
returnval = false;
}
In JS by the help of above code we are saying that the password that we are having that should be 6 character
var cpassword = document.forms[‘myForm’][“fcpass”].value;
if (cpassword != password){
seterror(“cpass”, “*Password and Confirm password should match!”);
returnval = false;
}
Must watch our video on Demand For Full Stack Developers in Future
In JS by the help of above code we check weather the entered password and confirm password should be same.
Author:-
Kuldeep Singh
Call the Trainer and Book your free demo Class Call now!!!
| SevenMentor Pvt Ltd.
© Copyright 2021 | Sevenmentor Pvt Ltd.