Form Validation Using JavaScript

Web forms are an essential part of web apps. They are used to collect user's information such as name, email address, location, age, and so on. But sometimes users do not enter the expected details. So it is crucial to validate the form data before sending it to the server-side. For form validation, client-side JavaScript can help us.

Form validation checks the accuracy of the user’s information before submitting the form.

JavaScript provides faster client-side form validation than server-side validation does. Server-side validation requires more time first occurring on the server, which requires the user's input to be submitted and sent to the server before validation occurs. Thus, client-side validation helps to create a better user experience. A lot of developers prefer JavaScript form validation.

In this tutorial, we’re going to show how to validate the form with Javascript.

1. Create the HTML Form.

Create an HTML form that will be validated using JavaScript when the user clicks on the submit button. Here we use <form>, <label>, <input>, <textarea>, <option> tags. Below, we show how to create so as your HTML will be correct.

<body>
    <h2 style="text-align: center"> Registration Form </h2>
    <form name="RegForm" action="/submit.php" onsubmit="return W3docs()" method="post" class="w3docs">
      <div>
        <label for="Name">Name:</label>
        <input type="text" id="Name" size="60" name="Name">
      </div>
      <br>
      <div>
        <label for="address">Address:</label>
        <input type="text" id="address" size="60" name="Address"> 
      </div>
      <br>
      <div>
        <label for="E-mail"l>E-mail Address:</label>
        <input type="text" id="E-mail" size="60" name="Email">
      </div>
      <br>
      <div>
        <label for="Password">Password:</label>
        <input type="text" id="Password" size="60" name="Password">
      </div>
      <br>
      <div>
        <label for="Telephone">Telephone: </label>
        <input type="text" id="Telephone" size="60" name="Telephone"> 
      </div>
      <br>
      <div>
        <label>Select Book</label>
        <select type="text" value="" name="Subject">
          <option></option>
          <option>HTML</option>
          <option>CSS</option>
          <option>PHP</option>
          <option>JavaScript</option>
        </select>
      </div>
      <br>
      <div>
        <label for="comment">Comments: </label>
        <textarea cols="62" id="comment" rows="10" name="Comment"></textarea>
      </div>
      <div class="buttons">
        <input type="submit" value="Send" name="Submit">
        <input type="reset" value="Reset" name="Reset">
      </div>
    </form>

2. Add CSS.

In the style section we will give our form a style with the help of CSS properties.

<style>
      .w3docs {
      margin-left: 70px;
      font-weight: bold ;
      text-align: left;
      font-family:sans-serif,bold, Arial, Helvetica;
      font-size:14px;
     }
      .buttons{
      display:flex;
      align-items: center;
      width:100%;
      }
      div input{
      margin-right:10px;
      }
      form {
      margin: 0 auto;
      width: 600px;
      }
      form input{
      padding: 10px;
      }
      form select{
      background-color: #ffffff;
      padding:5px;
      }
      form textarea{
      padding:10px;
      margin-bottom:5px;
      }
      form label{
      display:block;
      width:100%;
      margin-bottom:5px;
      }
    </style>

Form validation using JavaScript

Now we're going to create Javascript code which will validate our form.

In this example, we are going to validate the name, password, e-mail, telephone, subject, and address.

Carefully go through each line of the following example code to understand how JavaScript validation works:

function W3docs()                                    
{ 
    var name = document.forms["RegForm"]["Name"];               
    var email = document.forms["RegForm"]["Email"];    
    var phone = document.forms["RegForm"]["Telephone"];  
    var what =  document.forms["RegForm"]["Subject"];  
    var password = document.forms["RegForm"]["Password"];  
    var address = document.forms["RegForm"]["Address"];  
    var comment = document.forms["RegForm"]["Comment"];  

    if (name.value == "")                                  
    { 
        alert("Please enter your name."); 
        name.focus(); 
        return false; 
    }    
    if (address.value == "")                               
    { 
        alert("Please enter your address."); 
        address.focus(); 
        return false; 
    }        
    if (email.value == "")                                   
    { 
        alert("Please enter a valid e-mail address."); 
        email.focus(); 
        return false; 
    }    
    if (email.value.indexOf("@", 0) < 0)                 
    { 
        alert("Please enter a valid e-mail address."); 
        email.focus(); 
        return false; 
    }    
    if (email.value.indexOf(".", 0) < 0)                 
    { 
        alert("Please enter a valid e-mail address."); 
        email.focus(); 
        return false; 
    }    
    if (phone.value == "")                           
    { 
        alert("Please enter your telephone number."); 
        phone.focus(); 
        return false; 
    }    
    if (password.value == "")                        
    { 
        alert("Please enter your password"); 
        password.focus(); 
        return false; 
    }    
    if (what.selectedIndex < 1)                  
    { 
        alert("Please enter your course."); 
        what.focus(); 
        return false; 
    } 
    if (comment.value == "")                  
    { 
        alert("Please enter a comment."); 
        comment.focus(); 
        return false; 
    } 
    return true; 
}

Let’s see how we’ve created validated form with the help of HTML, CSS, and JavaScript. It is straightforward if you follow the steps above.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .w3docs {
      margin-left: 70px;
      font-weight: bold ;
      text-align: left;
      font-family:sans-serif,bold, Arial, Helvetica;
      font-size:14px;
      }
      .buttons{
      display:flex;
      align-items: center;
      width:100%;
      }
      div input{
      margin-right:10px;
      }
      form {
      margin: 0 auto;
      width: 600px;
      }
      form input{
      padding: 10px;
      }
      form select{
      background-color: #ffffff;
      padding:5px;
      }
      form textarea{
      padding:10px;
      margin-bottom:5px;
      }
      form label{
      display:block;
      width:100%;
      margin-bottom:5px;
      }
    </style>
  </head>
  <body>
    <h2 style="text-align: center"> Registration Form </h2>
    <form name="RegForm" action="/submit.php" onsubmit="return W3docs()" method="post" class="w3docs">
      <div>
        <label for="Name">Name:</label>
        <input type="text" id="Name" size="60" name="Name">
      </div>
      <br>
      <div>
        <label for="address">Address:</label>
        <input type="text" id="address" size="60" name="Address"> 
      </div>
      <br>
      <div>
        <label for="E-mail"l>E-mail Address:</label>
        <input type="text" id="E-mail" size="60" name="Email">
      </div>
      <br>
      <div>
        <label for="Password">Password:</label>
        <input type="text" id="Password" size="60" name="Password">
      </div>
      <br>
      <div>
        <label for="Telephone">Telephone: </label>
        <input type="text" id="Telephone" size="60" name="Telephone"> 
      </div>
      <br>
      <div>
        <label>Select Book</label>
        <select type="text" value="" name="Subject">
          <option></option>
          <option>HTML</option>
          <option>CSS</option>
          <option>PHP</option>
          <option>JavaScript</option>
        </select>
      </div>
      <br>
      <div>
        <label for="comment">Comments: </label>
        <textarea cols="62" id="comment" rows="10" name="Comment"></textarea>
      </div>
      <div class="buttons">
        <input type="submit" value="Send" name="Submit">
        <input type="reset" value="Reset" name="Reset">
      </div>
    </form>
    <script> 
      function W3docs()                                    
      { 
          var name = document.forms["RegForm"]["Name"];               
          var email = document.forms["RegForm"]["Email"];    
          var phone = document.forms["RegForm"]["Telephone"];  
          var what =  document.forms["RegForm"]["Subject"];  
          var password = document.forms["RegForm"]["Password"];  
          var address = document.forms["RegForm"]["Address"];  
          var comment = document.forms["RegForm"]["Comment"];  

          if (name.value == "")                                  
          { 
              alert("Please enter your name."); 
              name.focus(); 
              return false; 
          }    
          if (address.value == "")                               
          { 
              alert("Please enter your address."); 
              address.focus(); 
              return false; 
          }        
          if (email.value == "")                                   
          { 
              alert("Please enter a valid e-mail address."); 
              email.focus(); 
              return false; 
          }    
          if (email.value.indexOf("@", 0) < 0)                 
          { 
             alert("Please enter a valid e-mail address."); 
              email.focus(); 
              return false; 
          }    
          if (email.value.indexOf(".", 0) < 0)                 
          { 
              alert("Please enter a valid e-mail address."); 
              email.focus(); 
              return false; 
          }    
          if (phone.value == "")                           
          { 
              alert("Please enter your telephone number."); 
              phone.focus(); 
              return false; 
          }    
          if (password.value == "")                        
          { 
              alert("Please enter your password"); 
              password.focus(); 
              return false; 
          }    
          if (what.selectedIndex < 1)                  
          { 
              alert("Please enter your course."); 
              what.focus(); 
              return false; 
          } 
          if (comment.value == "")                  
          { 
             alert("Please enter a comment."); 
             comment.focus(); 
             return false; 
          } 
          return true; 
      }
    </script> 
  </body>
</html>

Do you find this helpful?

Related articles