JavaScript Form Validation

Use HTML constraints for common input checks, then JavaScript to respond to submission and give people clear, specific feedback.

Quick answer: Add built-in HTML constraints such as required, type="email" and minlength. Listen for the form's submit event and use the Constraint Validation API when you need custom behavior.

Start with HTML validation

Browser validation can catch missing or incorrectly formatted values before your JavaScript runs. Give each field a visible label and explain any special requirement.

<form id="signup-form">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>

  <label for="password">Password</label>
  <input id="password" name="password" type="password"
         minlength="8" required>

  <button type="submit">Create account</button>
  <p id="form-message" aria-live="polite"></p>
</form>

Handle a valid submission

Listen for the submit event. The browser checks native constraints before firing it; call preventDefault() only when you are intentionally handling the form in JavaScript.

const form = document.querySelector("#signup-form");
const message = document.querySelector("#form-message");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  message.textContent = "The form is ready to be submitted.";
});

This example demonstrates client-side interaction only. A real account or payment system must also validate submitted data on its server.

Check validity in JavaScript

Use checkValidity() to get a true or false result, or reportValidity() to ask the browser to show its validation feedback. The browser can focus the first invalid field.

if (form.reportValidity()) {
  // Continue with the valid form data.
}

Set a custom validation message

Use setCustomValidity() only when a rule cannot be expressed with built-in HTML constraints. Clear the custom message when the input changes; any nonempty message keeps the field invalid.

const password = document.querySelector("#password");
const confirmPassword = document.querySelector("#confirm-password");

function checkPasswordsMatch() {
  if (confirmPassword.value !== password.value) {
    confirmPassword.setCustomValidity("Passwords must match.");
  } else {
    confirmPassword.setCustomValidity("");
  }
}

password.addEventListener("input", checkPasswordsMatch);
confirmPassword.addEventListener("input", checkPasswordsMatch);

For this example, add a second labeled password input with id="confirm-password" and required to the form.

Make validation feedback accessible

Keep labels connected to controls, explain format requirements before submission, and do not rely on color alone to identify errors. Use concise text near the relevant field and preserve the browser's keyboard focus behavior.

Does JavaScript validation replace server validation?

No. Visitors can disable or bypass client-side scripts. Validate submitted data again on the server before storing it or using it in a sensitive action.

Practice: validate a contact form

Add a required name, a required email field and a message field with a minimum length. Submit the form empty, enter an invalid email, then enter valid values. Observe the browser's feedback and add one custom rule only if a built-in constraint cannot express it.