Post
Ask Question

Validation in JavaScript

Introduction

 
This article is about form validation using JavaScript with easy examples.
 

Validation

 
Whenever users fill in a registration form on any website, there is a need for appropriate information to be filled in by the candidates. If by mistake users provide the wrong information or in the incorrect format then there should be an error indicator for the user to correct his/her mistakes and then proceed further. 
 
So, there is a need for validation by which the preceding problem can be solved. Validation is done when the form is submitted by the user.
 
JavaScript provides the ability to validate the form on the client-side so the processing will be faster than the server-side validation. So validation is an important field and it must be done.
 
Using JavaScript you can validate fields for name, password, address, mobile number, email, and so on.
 

Validation into two parts

 
We will explain the validation in two parts, in other words, a few fields of the form and email field separately.
 
Validation into two parts
 

Form validation

 
Here is an example in which the validations of three fields have been done, in other words, name, password, and mobile number. Name cannot be empty, password should be at least 7 characters long and mobile number should be equal to 10 digits.
 
Here, we are validating the form on form submit and the user cannot proceed further until the given values or information are appropriate.
  1. <html>  
  2. <head>  
  3.     <title>Validation in JavaScript</title>  
  4. </head>  
  5. <script>  
  6.     function formvalidate() {  
  7.         var name = document.form.name.value;  
  8.         var password = document.form.password.value;  
  9.         var contact = document.form.contact.value;  
  10.         var address = document.form.address.value;  
  11.         if (name == null || name == "") {  
  12.             alter("Please enter your name");  
  13.             return false;  
  14.         }  
  15.         else if (password.length == 0) {  
  16.             alter("Please enter your secret password");  
  17.         }  
  18.         else if (password.length < 7) {  
  19.             alter("your password should be at least 7 characters long");  
  20.             return false;  
  21.         }  
  22.         else if (contact.length == 0) {  
  23.             alter("Please enter your contact number");  
  24.         }  
  25.         else if (contact.length < 10) {  
  26.             alter("contact number should be equal to 10 digits");  
  27.             return false;  
  28.         }  
  29.         else if (address.length == 0) {  
  30.             alter("Please enter your address");  
  31.         }  
  32.     }  
  33. </script>  
  34. <body>  
  35.     <form name="form" method="post" action="xyz.jsp" onsubmit="formvalidate">  
  36.     Name:<input type="text" value=""></br> Password:<input type="password" value=""></br>  
  37.     Contact:<input type="text" value=""></br> Address:<input type="text" value=""></br>  
  38.     <input type="submit" value="Submit">  
  39.     <input type="reset" value="Reset">  
  40.     </form>  
  41. </body>  
  42. </html>  
Output
 
Form validation
 

Email Validation

 
There may be many criteria for validating the email such as the following.
  • Email must consists of “@” and “.” (dot) symbols in it.
  • There must be at least one character before and after “@” symbol.
  • There must be two characters after “.” Symbol.
Let's look at the example.
  1. <html>  
  2. <head>  
  3.     <title>Validation in JavaScript</title>  
  4. </head>  
  5. <script>  
  6. function emailvalidate()  
  7. {  
  8. var x=document.form.name.value;  
  9. var atrateposition=x.indexOf("@");  
  10. var dotposition=x.lastIndexOf(".");  
  11. if(atposition<1 || dotposition<atposition+2 || atposition+2=x.length)  
  12. {  
  13. alter("Please enter your valid email \n atposition:"+atposition+"\n dotposition:+"dotposition);  
  14. return false;  
  15. }  
  16. }  
  17. </script>  
  18. <body>  
  19.     <form name="form" method="post" action="xyz.jsp" onsubmit="emailvalidate">  
  20.     Email:<input type="text" value="email"></br>  
  21.     <input type="submit" value="Submit">  
  22.     <input type="reset" value="Reset">  
  23.     </form>  
  24. </body>  
  25. </html> 
Output
 
Email Validation


Similar Articles