In this blog we will validate our form by using pure javascript..firstly we have to
make our form in HTML and apply some basic css design so that it looks nice.
<!-- Data Validation
Data validation is the process of ensuring that user input is clean, correct,
and useful.
Typical validation tasks are:
has the user filled in all required fields?
has the user entered a valid date?
has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct user input.
Validation can be defined by many different methods, and deployed in many different
ways.
Server side validation is performed by a web server, after input has been sent to
the server.
Client side validation is performed by a web browser, before input is sent to a
web server. -->
Inside the body of our HTML we make a form tag and while on submit the form we return a validateform() function
which validate our form and we are going to write this function in our js file
here we make a separate js file so don't forget to add it.
"index.html"
<!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>
<style>
body {
padding: 20px;
background-color: aqua;
}
.formdesign {
font-size: 20px;
margin-top: auto;
padding-top: 20px;
}
.formdesign input {
width: 50%;
padding: 12px 20px;
border: 1px solid blue;
margin: 14px;
border-radius: 4px;
font-size: 15px;
}
div.hello {
margin-top: 50px;
margin-left: 80px;
border-radius:2px;
}
.formerror{
color:red;
}
.but {
border-radius: 9px;
width: 100px;
height: 50px;
font-size: 25px;
margin: 22px 20px;
}
</style>
<body>
<form name="myForm" onsubmit="return validateform()" method="post">
<div class="hello">
<div class="formdesign" id="name">
Name: <input type="text" name="fname"><b>
<span class="formerror"></span></b>
</div>
<div class="formdesign" id="email">
email: <input type="email" name="femail"><b>
<span class="formerror"></span></b>
</div>
<div class="formdesign" id="phone">
phone no: <input type="phone" name="fphone" required><b>
<span class="formerror"></span></b>
</div>
<div class="formdesign" id="pass">
password: <input type="password" name="fpass"><b>
<span class="formerror"></span></b>
</div>
<div class="formdesign" id="phone">
confirm password: <input type="password" name="fcpass"><b>
<span class="formerror"></span></b>
</div>
<input class="but" type="submit" value="submit">
</div>
</form>
</body>
<script src="form.js"></script>
</html>
In the js file we also make 2 functions clearErrors() and seterror().In the validateform() function first we call the
clearErrors() function so that if there are any errors in our form than it will iterate the errors and loop it
for(let item of errors)
{
item.innerHTML = "";
}
and set the innerHTML of this to blank.so that the errors will be gone.
and in the seterror() function we take two arguments id and error and set the error to the respective id.
"form.js"
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 phoneno= /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(phone.match(phoneno)){
returnval=true
}
else{
seterror("phone","*phone no format not match")
returnval=false
}
var password = document.forms['myForm']["fpass"].value;
if (password.length < 6){
// create a logic to allow only those passwords which contain
atleast one letter, one number and one special character and one uppercase letter
seterror("pass", "*Password should be atleast 6 characters long!");
returnval = false;
}
var decimal1= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
if(password.match(decimal1)){
returnval=true
}
else{
seterror("pass","*password should contain at least one lowercase letter,
one uppercase letter, one numeric digit, and one special character")
returnval=false
}
var cpassword = document.forms['myForm']["fcpass"].value;
if (cpassword != password){
seterror("cpass", "*Password and Confirm password should match!");
returnval = false;
}
return returnval;
}
Comments
Post a Comment