Form Validation Using JavaScript

In this article, we can see about validations in JavaScript. HTML. Form verification can be done in JavaScript.
 

Introduction

 
JavaScript is used for mainly client-side validations. A form is also called a web form or HTML form. Forms are used on web pages for users to enter their required details, which are sent to the server for processing. For example, Student registration form, online banking, ecommerce sites, etc.
 
Below is a code in HTML, CSS and JavaScript to verify a form. HTML is used to create the form. CSS is designing the layout of the form. JavaScript to check the form.
Here is my HTML code for this.
 
Try it yourself,
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>Reg Form</title>    
  5. </head>    
  6. <body>    
  7.     <center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>    
  8.     <hr>    
  9.     <form method="" action="" name="reg_form" onsubmit="return validate()">    
  10.         <h2>Registration Form</h2>    
  11.         <table>    
  12.             <tr>    
  13.                 <td><label>First Name: </label></td>    
  14.                 <td>    
  15.                     <input type="text" name="fname" placeholder="First Name">    
  16.                 </td>    
  17.             </tr>    
  18.             <tr>    
  19.                 <td><label>Last Name: </label></td>    
  20.                 <td>    
  21.                     <input type="text" name="lname" placeholder="Last Name">    
  22.                 </td>    
  23.             </tr>    
  24.             <tr>    
  25.                 <td><label>Address: </label></td>    
  26.                 <td>    
  27.                     <input type="textarea" size="50" name="address" placeholder="Address">    
  28.                 </td>    
  29.             </tr>    
  30.             <tr>    
  31.                 <td><label>Gender: </label></td>    
  32.                 <td>    
  33.                     <input type="radio" name="gender" value="male">Male    
  34.                     <input type="radio" name="gender" value="femele">Female    
  35.                 </td>    
  36.             </tr>    
  37.             <tr>    
  38.                 <td><label>Email Id: </label></td>    
  39.                 <td>    
  40.                     <input type="text" name="email" placeholder="example@gmail.com">    
  41.                 </td>    
  42.             </tr>    
  43.             <tr>    
  44.                 <td><label>Mobile: </label></td>    
  45.                 <td>    
  46.                     <input type="number" name="mobile">    
  47.                 </td>    
  48.             </tr>    
  49.             <tr>    
  50.             <td><label>Course: </label></td>    
  51.                 <td>    
  52.                     <select name="course">    
  53.                         <option value="select course">select course</option>    
  54.                         <option value="HTML">HTML</option>    
  55.                         <option value="CSS">CSS</option>    
  56.                         <option value="JavaScript">JAVASCRIPT</option>    
  57.                         <option value="Java">JAVA</option>    
  58.                     </select>    
  59.                 </td>    
  60.             </tr>    
  61.             <tr>    
  62.                 <td>    
  63.                     <input type="submit" name="submit" value="Submit">    
  64.                     <input type="reset" name="reset" value="Reset">    
  65.                 </td>    
  66.             </tr>             
  67.         </table>    
  68.     </form>    
  69. </body>    
  70. </html>     
Output



Here is my CSS code for this.

After applying the CSS code, the form will change to a responsive format. 

Try it yourself,
  1. <style type="text/css">  
  2.     body{  
  3.         font-family: Calibri;  
  4.     }  
  5.     input[type="text"] {  
  6.         width250px;  
  7.     }  
  8.     input[type="submit"], input[type="reset"] {  
  9.         width77px;  
  10.         height27px;  
  11.         positionrelative;left: 180px;  
  12.     }  
  13.     form{  
  14.         text-aligncenter;  
  15.         font-family: Calibri;  
  16.         font-size20px;  
  17.         border3px solid black;  
  18.         width600px;  
  19.         margin20px auto;  
  20.     }  
  21.     td {  
  22.         padding10px;  
  23.     }  
  24.     td:first-child {  
  25.         text-alignright;  
  26.         font-weightbold;  
  27.     }  
  28.     td:last-child {  
  29.         text-alignleft;  
  30.   
  31. </style>  
Output

 
Here is my JavaScript code for this.
 
After we have successfully created the form, the next step is to validate the form using JavaScript.

Try it yourself.
 
The first step is to validate Form in First Name and Last Name,
  1. <script>  
  2.     function validate() {  
  3.         var fname = document.reg_form.fname;  
  4.         var lname = document.reg_form.lname;  
  5.         if (fname.value.length <= 0) {  
  6.             alert("Name is required");  
  7.             fname.focus();  
  8.             return false;  
  9.         }  
  10.         if (lname.value.length <= 0) {  
  11.             alert("Last Name is required");  
  12.             lname.focus();  
  13.             return false;  
  14.         }  
  15. </script>   
Output
 
 
 
 
Next check the value Form in address,gender,
  1. <script>  
  2. var address = document.reg_form.address;  
  3. var gender = document.reg_form.gender;  
  4. if (address.value.length <= 0) {  
  5.     alert("Address is required");  
  6.     address.focus();  
  7.     return false;  
  8.     }  
  9. if (gender.value.length <= 0) {  
  10.     alert("Gender is required");  
  11.     gender.focus();  
  12.     return false;  
  13.             }  
  14. </script>  
Output
 
 
 
 
Here is my JavaScript code for Form validations this.
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <title>Reg Form</title>    
  5.     <style type="text/css">    
  6.         body{    
  7.             font-family: Calibri;    
  8.         }    
  9.         input[type="text"] {    
  10.             width: 250px;    
  11.         }    
  12.         input[type="submit"], input[type="reset"] {    
  13.             width: 77px;    
  14.             height: 27px;    
  15.             position: relative;left: 180px;    
  16.         }    
  17.         form{    
  18.             text-align: center;    
  19.             font-family: Calibri;    
  20.             font-size: 20px;    
  21.             border: 3px solid black;    
  22.             width: 600px;    
  23.             margin: 20px auto;    
  24.         }    
  25.         td {    
  26.             padding: 10px;    
  27.         }    
  28.         td:first-child {    
  29.             text-align: right;    
  30.             font-weight: bold;    
  31.         }    
  32.         td:last-child {    
  33.             text-align: left;    
  34.     
  35.     </style>    
  36.     <script>    
  37.         function validate() {    
  38.             var fname = document.reg_form.fname;    
  39.             var lname = document.reg_form.lname;    
  40.             var address = document.reg_form.address;    
  41.             var gender = document.reg_form.gender;    
  42.             var email = document.reg_form.email;    
  43.             var mobile = document.reg_form.mobile;    
  44.             var course = document.reg_form.course;    
  45.     
  46.             if (fname.value.length <= 0) {    
  47.                 alert("Name is required");    
  48.                 fname.focus();    
  49.                 return false;    
  50.             }    
  51.             if (lname.value.length <= 0) {    
  52.                 alert("Last Name is required");    
  53.                 lname.focus();    
  54.                 return false;    
  55.             }    
  56.             if (address.value.length <= 0) {    
  57.                 alert("Address is required");    
  58.                 address.focus();    
  59.                 return false;    
  60.             }    
  61.             if (gender.value.length <= 0) {    
  62.                 alert("Gender is required");    
  63.                 gender.focus();    
  64.                 return false;    
  65.             }    
  66.             if (email.value.length <= 0) {    
  67.                 alert("Email Id is required");    
  68.                 email.focus();    
  69.                 return false;    
  70.             }    
  71.             if (mobile.value.length <= 0) {    
  72.                 alert("Mobile number is required");    
  73.                 mobile.focus();    
  74.                 return false;    
  75.             }    
  76.             if (course.value == "select course") {    
  77.                 alert("Course is required");    
  78.                 course.focus();    
  79.                 return false;    
  80.             }    
  81.             return false;    
  82.         }    
  83.     </script>    
  84. </head>    
  85. <body>    
  86.     <center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>    
  87.     <hr>    
  88.     <form method="" action="" name="reg_form" onsubmit="return validate()">    
  89.         <h2>Registration Form</h2>    
  90.         <table>    
  91.             <tr>    
  92.                 <td><label>First Name: </label></td>    
  93.                 <td>    
  94.                     <input type="text" name="fname" placeholder="First Name">    
  95.                 </td>    
  96.             </tr>    
  97.             <tr>    
  98.                 <td><label>Last Name: </label></td>    
  99.                 <td>    
  100.                     <input type="text" name="lname" placeholder="Last Name">    
  101.                 </td>    
  102.             </tr>    
  103.             <tr>    
  104.                 <td><label>Address: </label></td>    
  105.                 <td>    
  106.                     <input type="textarea" size="50" name="address" placeholder="Address">    
  107.                 </td>    
  108.             </tr>    
  109.             <tr>    
  110.                 <td><label>Gender: </label></td>    
  111.                 <td>    
  112.                     <input type="radio" name="gender" value="male">Male    
  113.                     <input type="radio" name="gender" value="femele">Female    
  114.                 </td>    
  115.             </tr>    
  116.             <tr>    
  117.                 <td><label>Email Id: </label></td>    
  118.                 <td>    
  119.                     <input type="text" name="email" placeholder="example@gmail.com">    
  120.                 </td>    
  121.             </tr>    
  122.             <tr>    
  123.                 <td><label>Mobile: </label></td>    
  124.                 <td>    
  125.                     <input type="number" name="mobile">    
  126.                 </td>    
  127.             </tr>    
  128.             <tr>    
  129.             <td><label>Course: </label></td>    
  130.                 <td>    
  131.                     <select name="course">    
  132.                         <option value="select course">select course</option>    
  133.                         <option value="HTML">HTML</option>    
  134.                         <option value="CSS">CSS</option>    
  135.                         <option value="JavaScript">JAVASCRIPT</option>    
  136.                         <option value="Java">JAVA</option>    
  137.                     </select>    
  138.                 </td>    
  139.             </tr>    
  140.             <tr>    
  141.                 <td>    
  142.                     <input type="submit" name="submit" value="Submit">    
  143.                     <input type="reset" name="reset" value="Reset">    
  144.                 </td>    
  145.             </tr>             
  146.         </table>    
  147.     </form>    
  148. </body>    
  149. </html>     
Output
 
Enter your data in the registration form
 
 
This way, we can enable all JavaScript verifications.
 

Summary

 
In this article, we learned about form verification using HTML, CSS, and JavaScript. I hope this is helpful to you. If you have any comments please leave a comment. Thanks!