Vanilla JavaScript Form Validation

Validate HTML forms with vanilla JavaScript using the Constraint Validation API. Provides custom error messages, real-time validation on input, and.

Javascript Form Validation Updated: 2026-01-15

Code

snippet

function validateForm(form) {
  const fields = form.querySelectorAll('input, textarea, select');
  let isValid = true;

  fields.forEach((field) => {
    const errorEl = form.querySelector(`[data-error-for="${field.name}"]`);
    if (!field.checkValidity()) {
      isValid = false;
      if (errorEl) errorEl.textContent = field.validationMessage;
      field.setAttribute('aria-invalid', 'true');
    } else {
      if (errorEl) errorEl.textContent = '';
      field.removeAttribute('aria-invalid');
    }
  });

  return isValid;
}

const form = document.querySelector('form');
form.addEventListener('input', (e) => validateForm(e.currentTarget));
form.addEventListener('submit', (e) => {
  if (!validateForm(form)) e.preventDefault();
});