JavaScript Form Validation Tutorial (No Library)

Form validation means checking that what a user typed is acceptable, a filled-in name, a real email, a long-enough password, before doing anything with it. This guide shows you how to validate a form with plain JavaScript (no library), giving instant feedback in the browser, with complete working code you can adapt to any form. It also explains the one security rule beginners always miss.

1. What form validation is and where it runs

Validation happens in two places, and good projects do both. Client-side validation runs in the browser with JavaScript, giving the user instant feedback without reloading the page, this is what this guide covers. Server-side validation runs on the server after submission and is the real security check, because it cannot be bypassed by the user. This tutorial builds the client-side part; just remember the server-side part is not optional.

2. The form we will validate

Here is a simple registration form we will validate: a name, an email, and a password with confirmation.

  
  

  
  

  
  

  
  

  Sign Up

Each field has an empty span next to it where we will show its error message.

3. Catching the submit event

The key idea is to listen for the form’s submit event and stop it if validation fails, using preventDefault(). If everything is valid, we let it through.

const form = document.getElementById('signupForm');

form.addEventListener('submit', function (e) {
  let valid = true;

  // ... checks go here, set valid = false on any failure ...

  if (!valid) {
    e.preventDefault(); // stop the form from submitting
  }
});

4. Checking required fields

The most basic check: make sure a field is not empty. trim() removes spaces so a user cannot pass the check with just blank spaces.

const name = document.getElementById('name').value.trim();
const nameError = document.getElementById('nameError');

if (name === '') {
  nameError.textContent = 'Name is required.';
  valid = false;
} else {
  nameError.textContent = ''; // clear any previous error
}

5. Validating an email

To check an email looks valid, use a regular expression, a pattern that the email must match (something, an @ sign, a domain, a dot, an extension).

const email = document.getElementById('email').value.trim();
const emailError = document.getElementById('emailError');
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailPattern.test(email)) {
  emailError.textContent = 'Enter a valid email address.';
  valid = false;
} else {
  emailError.textContent = '';
}

The pattern /^[^\s@]+@[^\s@]+\.[^\s@]+$/ simply means: some characters, then @, then some characters, then a dot, then some characters, with no spaces. That covers normal email formats.

6. Validating password length and match

Two checks here: the password must be long enough, and the confirmation must match it.

const password = document.getElementById('password').value;
const confirm = document.getElementById('confirm').value;
const passwordError = document.getElementById('passwordError');
const confirmError = document.getElementById('confirmError');

if (password.length < 6) {
  passwordError.textContent = 'Password must be at least 6 characters.';
  valid = false;
} else {
  passwordError.textContent = '';
}

if (confirm !== password) {
  confirmError.textContent = 'Passwords do not match.';
  valid = false;
} else {
  confirmError.textContent = '';
}

7. The complete validation script

Here is everything together, a complete, working client-side validation:

const form = document.getElementById('signupForm');

form.addEventListener('submit', function (e) {
  let valid = true;

  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const password = document.getElementById('password').value;
  const confirm = document.getElementById('confirm').value;
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  document.getElementById('nameError').textContent =
    name === '' ? (valid = false, 'Name is required.') : '';

  document.getElementById('emailError').textContent =
    !emailPattern.test(email) ? (valid = false, 'Enter a valid email.') : '';

  document.getElementById('passwordError').textContent =
    password.length < 6 ? (valid = false, 'Min 6 characters.') : '';

  document.getElementById('confirmError').textContent =
    confirm !== password ? (valid = false, 'Passwords do not match.') : '';

  if (!valid) e.preventDefault();
});

Always validate on the server too

To repeat the most important point: this JavaScript improves the experience, but it is not security. A determined user can bypass it. In a real project, after this client-side check, your server (PHP, for example) must independently validate the same data before saving it, checking for empty fields, a valid email, and so on. The projects on CodeZips show this two-layer approach, JavaScript for instant feedback and PHP for the real check, browse the ready-to-run projects with full source code to see validation handled properly in a complete application.

Frequently asked questions