Skip to content

Validate form using JavaScript

  • by

Learn how to validate a form using JavaScript to ensure accurate and secure user input. This tutorial covers the step-by-step process of implementing form validation using JavaScript, enabling you to create robust and error-free web forms.

To validate a form using JavaScript, you can use the following steps:

Step 1: HTML Markup Create an HTML form and add the necessary input fields along with a submit button. You can also add an <span> element to display error messages.

<form id="myForm">
  <input type="text" id="name" placeholder="Name">
  <input type="email" id="email" placeholder="Email">
  <input type="password" id="password" placeholder="Password">
  <span id="error"></span>
  <button type="submit">Submit</button>
</form>

Step 2: JavaScript Validation Add JavaScript code to validate the form when the submit button is clicked. You can use the addEventListener method to attach an event listener to the form’s submit event.

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevent the form from submitting

  // Fetch input field values
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  // Validate the form
  if (name === "") {
    showError("Name is required");
  } else if (email === "") {
    showError("Email is required");
  } else if (!isValidEmail(email)) {
    showError("Invalid email format");
  } else if (password === "") {
    showError("Password is required");
  } else if (password.length < 8) {
    showError("Password must be at least 8 characters");
  } else {
    // Form is valid, submit it
    document.getElementById("error").textContent = "";
    alert("Form submitted successfully");
    // Add code to submit the form to a server or perform other actions here
  }
});

// Function to display error message
function showError(message) {
  document.getElementById("error").textContent = message;
}

// Function to validate email format
function isValidEmail(email) {
  var emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  return emailRegex.test(email);
}

Validate form using JavaScript

Here’s a complete example of form validation using JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script>
    function validateForm() {
      var name = document.getElementById("name").value;
      var email = document.getElementById("email").value;
      var password = document.getElementById("password").value;

      // Validate name
      if (name === "") {
        alert("Name is required");
        return false;
      }

      // Validate email
      if (email === "") {
        alert("Email is required");
        return false;
      }

      // Validate password
      if (password === "") {
        alert("Password is required");
        return false;
      } else if (password.length < 8) {
        alert("Password must be at least 8 characters");
        return false;
      }

      // Form is valid, submit it
      alert("Form submitted successfully");
      return true;
    }
  </script>
</head>
<body>
  <form id="myForm" onsubmit="return validateForm()">
    <input type="text" id="name" placeholder="Name">
    <input type="email" id="email" placeholder="Email">
    <input type="password" id="password" placeholder="Password">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output:

Validate form using JavaScript

Comment if you have any doubts or suggestions on this Js HTML code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Tags:

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading