Form Validation Using JavaScript

Web forms are used to collect users' 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. For form validation, client-side JavaScript can help us.

Let’s 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:

Form validation with JS

function ValidationForm() {
  let username = document.forms["RegForm"]["Name"];
  let email = document.forms["RegForm"]["Email"];
  let phoneNumber = document.forms["RegForm"]["Telephone"];
  let select = document.forms["RegForm"]["Subject"];
  let pass = document.forms["RegForm"]["Password"];
  if (username.value == "") {
    alert("Please enter your name.");
    username.focus();
    return false;
  }
  if (email.value == "") {
    alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
  }
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email.value)) {
    alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
  }
  if (phoneNumber.value == "") {
    alert("Please enter your telephone number.");
    phoneNumber.focus();
    return false;
  }
  if (pass.value == "") {
    alert("Please enter your password");
    pass.focus();
    return false;
  }
  if (select.selectedIndex < 1) {
    alert("Please enter your course.");
    select.focus();
    return false;
  }
  return true;
}

Try it Yourself »

Here’s the full code in action:

HTML Form validation using JavaScript

<!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, 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 label {
        display: block;
        width: 100%;
        margin-bottom: 5px;
      }
    </style>
  </head>
  <body>
    <h2 style="text-align: center"> Registration Form </h2>
    <form name="RegForm" action="/form/submit.php" onsubmit="return ValidationForm()" method="post" class="w3docs">
      <div>
        <label for="Name">Name:</label>
        <input type="text" id="Name" size="60" name="Name" />
      </div>
      <br />
      <div>
        <label for="E-mail">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 for="Subject">Select Book</label>
        <select id="Subject" name="Subject">
          <option></option>
          <option>HTML</option>
          <option>CSS</option>
          <option>PHP</option>
          <option>JavaScript</option>
        </select>
      </div>
      <br />
      <div class="buttons">
        <input type="submit" value="Send" name="Submit" />
        <input type="reset" value="Reset" name="Reset" />
      </div>
    </form>
  </body>
</html>

Try it Yourself »

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 submitting the form to the server first, which adds latency before validation can occur. Thus, client-side validation helps to create a better user experience. A lot of developers prefer JavaScript form validation. For modern projects, consider using HTML5 built-in validation attributes like required and pattern as simpler alternatives.