Registration form validation in javascript

Introduction

Today i will show you how to form validation in javascript. First of i will make input box where we can put data and these input are make using html. After making input box than i will design these boxes using CSS. After design i validate the form using javascript.

Procedure

Create Text file, Click on file => Save As => Enter name and Choose location where you want to save that file and than change save type as “All Files“.

After Creating file Right Click on file and click on edit and than choose editor which you want. There are several editors used, Sublime, Notepad++, Notepad, Adobe Dreamviewer etc.

After Open tool where you want to write code, than copy paste the code. its very easy method just follow me.

I divide the code into 3 parts. HTML Code, CSS Code, JavaScript Code.

JavaScript Code
function checkFunction()
{
 var name=document.forms["myForm"]["name"].value;
 var email=document.forms["myForm"]["email"].value;
 var password=document.forms["myForm"]["password"].value;
 var repassword=document.forms["myForm"]["repassword"].value;
 var number=document.forms["myForm"]["number"].value;
 var address=document.forms["myForm"]["address"].value;
  
  if(name=="")
  {alert("Please Enter Name");
  return false;}

  else if (email=="") 
  {
  	alert("Please Enter Email");
  return false;}
  
   else if (password=="") 
   {
   	alert("Please Enter Passwword");
  return false;}
  
   else if (repassword=="") {
   	alert("Please Enter Passwword");
  return false;}
  
   else if (number=="") 
   {

   alert("Please Enter Number");
    return false;}
  
   else if (address="") {
   	alert("Please Enter Address");
  return false;}
else
{
	alert("Registration Successfull");
  return true;}


}
CSS Code
 body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;


}
form
 { background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;

}
::placeholder {
  color: white;
  opacity: 1; 
}

#back_image
{   filter: blur(8px);
  -webkit-filter: blur(8px);
    width: 100%;
  margin: 0px;
  
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#box_design
{
    margin: 8px 0;
    width: 80%;
    box-sizing: border-box;
    padding: 12px 10px;
    border-radius: 3px;
     border: 3px solid #fff;
         background: transparent;
         color: white;


}

#box_design1 
{ 
  
 width: 80%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;

}
HTML Code
 

<!DOCTYPE html>
<html>
<head>
	<title>BsProgrm.com</title>
<style> CSS CODE PASTE HERE </style>
<script> JAVA SCRIPT CODE PASTE HERE </script>
</head>


<body>
<img src="bg-01.jpg" id="back_image">
<form name="myForm" action="index.html" method="POST" onsubmit="return checkFunction()"> 
 <h1> Registration Form </h1>
 <input type="text" name="name" id="box_design" placeholder="Name"><br>

 <input type="text" name="email" id="box_design" placeholder="Email"><br>
 <input type="password" name="password" id="box_design" placeholder="Passwword"><br>
 <input type="password" name="repassword" id="box_design" placeholder="Confrim Passwword"><br>
 <input type="text" name="number" id="box_design" placeholder="Number"><br>
 <input type="text" name="address" id="box_design" placeholder="Address"><br>
 <input type="submit" name="submit" id="box_design1" value="Sign Up">
</form>

</body>



</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *