How to Validate a Form in JavaScript

Use JavaScript form validation when input must be checked before submission, API calls, or checkout flow logic. The cleanest pattern is validating inside the form’s "submit" event and stopping invalid submissions early.

What you’ll build or solve

You’ll learn how to validate a form in JavaScript using submit handlers, input checks, and error messages. You’ll also know how to keep validation readable and scalable.

When this approach works best

This approach is the right choice when forms need rules beyond basic HTML validation.

Common real-world scenarios include:

• Signup forms
• Checkout steps
• Password confirmation
• Required fields
• Custom business rules

This is a bad idea when simple HTML attributes like required, minlength, or type="email" already fully solve the problem.

Prerequisites

You only need:

• A basic HTML form
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Validate inside the submit event

Start by selecting the form and fields.

<form class="signup-form">
  <input class="email" type="email">
  <button type="submit">Join</button>
</form>

<script>
  const form = document.querySelector(".signup-form");
  const emailInput = document.querySelector(".email");

  form.addEventListener("submit", (event) => {
    if (emailInput.value.trim() === "") {
      event.preventDefault();
      console.log("Email required");
    }
  });
</script>

This prevents invalid submissions before the page reloads or API call.

Add more checks for custom rules.

if (!emailInput.value.includes("@")) {
  event.preventDefault();
}

This pattern scales well for passwords, checkboxes, and matching fields.

What to look for:

• Validate inside the submit callback
• Use preventDefault() on invalid input
• Trim whitespace before checking
• Great for custom rules
• Prefer HTML validation for simple cases

Examples you can copy

Required email

if (emailInput.value.trim() === "") {
  event.preventDefault();
}

Password length

if (password.value.length < 8) {
  event.preventDefault();
}

Confirm password

if (password.value !== confirmPassword.value) {
  event.preventDefault();
}

Common mistakes and how to fix them

Mistake 1: Reading values outside the submit event

What the reader might do:

const email = emailInput.value;

Why it breaks: the value may be stale before submission.

Corrected approach:

Read the value inside the submit callback.

Mistake 2: Forgetting whitespace trimming

What the reader might do:

if (nameInput.value === "")

Why it breaks: spaces still count as text.

Corrected approach:

if (nameInput.value.trim() === "")

Mistake 3: Replacing built-in HTML validation unnecessarily

What the reader might do:

if (!email.value.includes("@"))

Why it breaks: type="email" may already handle this more reliably.

Corrected approach:

Use HTML validation first, then add JavaScript only for extra rules.

Troubleshooting

If invalid forms still submit, confirm preventDefault() runs.

If spaces bypass validation, add .trim().

If Enter submission skips logic, attach the listener to the form, not the button.

If the rule is simple, consider native HTML validation first.

Quick recap

• Validate inside the submit event
• Use preventDefault() for invalid input
• Use .trim() for text checks
• Add custom business rules in JavaScript
• Prefer HTML validation for simple cases