Form Validation

Every form on the web is a contract between you and the user. They fill in data, you process it. But users make mistakes — typos, wrong formats, skipped required fields. Without validation, bad data reaches your server, causes errors, or creates security issues.

Client-side form validation catches problems early, right in the browser, before a network request is ever made. It gives users immediate feedback and a smoother experience. It is not a replacement for server-side validation — always validate on the server too — but it dramatically improves usability.

The Basics: Constraint Validation API

Modern browsers ship with a built-in validation system. HTML attributes like required, minlength, maxlength, type="email", and pattern define constraints. The browser checks them automatically when a form is submitted.

JavaScript gives you access to this through the Constraint Validation API. Every input element has a validity object describing its current state, and a checkValidity() method that returns true or false.

// Simulating constraint validation checks
function checkField(value, rules) {
  const errors = [];

  if (rules.required && value.trim() === "") {
    errors.push("This field is required.");
  }

  if (rules.minLength && value.length < rules.minLength) {
    errors.push(`Must be at least ${rules.minLength} characters.`);
  }

  if (rules.maxLength && value.length > rules.maxLength) {
    errors.push(`Must be no more than ${rules.maxLength} characters.`);
  }

  if (rules.pattern && !rules.pattern.test(value)) {
    errors.push("Format is invalid.");
  }

  return errors;
}

const usernameErrors = checkField("al", {
  required: true,
  minLength: 3,
  maxLength: 20,
  pattern: /^[a-zA-Z0-9_]+$/,
});

console.log("Username errors:", usernameErrors);

const emailErrors = checkField("user@example.com", {
  required: true,
  pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
});

console.log("Email errors:", emailErrors);

Custom Validation Rules

Built-in constraints cover common cases, but real applications need more. Is this username already taken? Do the two password fields match? Is the date in the future? These require custom logic.

The pattern is straightforward: write a function that takes a value and returns an array of error messages. An empty array means the field is valid.

// Custom validators for common scenarios
const validators = {
  email(value) {
    const errors = [];
    if (!value.trim()) {
      errors.push("Email is required.");
      return errors;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      errors.push("Enter a valid email address.");
    }
    return errors;
  },

  password(value) {
    const errors = [];
    if (value.length < 8) errors.push("Must be at least 8 characters.");
    if (!/[A-Z]/.test(value)) errors.push("Must contain an uppercase letter.");
    if (!/[0-9]/.test(value)) errors.push("Must contain a number.");
    return errors;
  },

  confirmPassword(value, original) {
    return value !== original ? ["Passwords do not match."] : [];
  },
};

// Test the validators
const emailResult = validators.email("not-an-email");
console.log("Email validation:", emailResult);

const passwordResult = validators.password("weak");
console.log("Password validation:", passwordResult);

const matchResult = validators.confirmPassword("abc123XY", "abc123XY");
console.log("Passwords match:", matchResult.length === 0 ? "Yes" : matchResult);

Real-Time Feedback

Waiting until submit to show errors is frustrating. Users fill out a long form, hit submit, and suddenly see five error messages. A better approach is to validate fields as the user interacts with them — typically on the blur event (when they leave a field) or input event (as they type).

// Real-time validation simulation
function createFieldValidator(rules) {
  return {
    touched: false,
    value: "",

    onBlur(newValue) {
      this.touched = true;
      this.value = newValue;
      return this.validate();
    },

    onInput(newValue) {
      this.value = newValue;
      if (this.touched) {
        return this.validate();
      }
      return [];
    },

    validate() {
      const errors = [];
      for (const rule of rules) {
        const result = rule(this.value);
        if (result) errors.push(result);
      }
      return errors;
    },
  };
}

const required = (v) => v.trim() === "" ? "This field is required." : null;
const minLen = (n) => (v) => v.length < n ? `Minimum ${n} characters.` : null;
const isEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? null : "Invalid email format.";

const emailField = createFieldValidator([required, isEmail]);
const nameField = createFieldValidator([required, minLen(2)]);

// Simulate user interactions
console.log("--- Name field ---");
console.log("Input 'J':", nameField.onInput("J"));       // Not touched yet, no error shown
console.log("Blur with 'J':", nameField.onBlur("J"));    // Now touched, shows error
console.log("Input 'Jane':", nameField.onInput("Jane")); // Touched, shows valid

console.log("\n--- Email field ---");
console.log("Blur empty:", emailField.onBlur(""));
console.log("Input bad:", emailField.onInput("notanemail"));
console.log("Input good:", emailField.onInput("jane@example.com"));

Building a Complete Validation System

Individual field validators are useful, but a form has multiple fields. You need to validate all of them together when the user submits, collect all the errors, and decide whether to proceed.

// A complete form validation system
function validateForm(fields) {
  const results = {};
  let isValid = true;

  for (const [name, { value, validators }] of Object.entries(fields)) {
    const errors = validators.flatMap((fn) => {
      const result = fn(value);
      return result ? [result] : [];
    });

    results[name] = { value, errors, valid: errors.length === 0 };
    if (errors.length > 0) isValid = false;
  }

  return { isValid, fields: results };
}

// Reusable validator functions
const required = (msg = "Required.") => (v) => v.trim() ? null : msg;
const email = () => (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? null : "Invalid email.";
const minLength = (n) => (v) => v.length >= n ? null : `At least ${n} characters required.`;
const matches = (other, msg) => (v) => v === other ? null : msg;

// Simulate a registration form submission
function handleSignup(formData) {
  const result = validateForm({
    name: {
      value: formData.name,
      validators: [required("Name is required."), minLength(2)],
    },
    email: {
      value: formData.email,
      validators: [required("Email is required."), email()],
    },
    password: {
      value: formData.password,
      validators: [required("Password is required."), minLength(8)],
    },
    confirmPassword: {
      value: formData.confirmPassword,
      validators: [matches(formData.password, "Passwords do not match.")],
    },
  });

  if (result.isValid) {
    console.log("Form is valid! Submitting...");
    console.log("Data:", { name: formData.name, email: formData.email });
  } else {
    console.log("Form has errors:");
    for (const [field, data] of Object.entries(result.fields)) {
      if (data.errors.length > 0) {
        console.log(`  ${field}: ${data.errors.join(", ")}`);
      }
    }
  }
}

// Test with invalid data
handleSignup({
  name: "A",
  email: "not-an-email",
  password: "short",
  confirmPassword: "different",
});

console.log("\n---\n");

// Test with valid data
handleSignup({
  name: "Alice",
  email: "alice@example.com",
  password: "securePass1",
  confirmPassword: "securePass1",
});

Try It Yourself

Build a validator for a credit card form. It should check that the card number is 16 digits, the expiry is a future date in MM/YY format, and the CVV is 3 or 4 digits. Try submitting both valid and invalid data to see the results.

// Credit card form validator — experiment with different inputs
const validators = {
  cardNumber(value) {
    const stripped = value.replace(/\s/g, "");
    if (!/^\d{16}$/.test(stripped)) {
      return "Card number must be 16 digits.";
    }
    return null;
  },

  expiry(value) {
    if (!/^\d{2}\/\d{2}$/.test(value)) {
      return "Expiry must be in MM/YY format.";
    }
    const [month, year] = value.split("/").map(Number);
    if (month < 1 || month > 12) return "Invalid month.";

    const now = new Date();
    const expDate = new Date(2000 + year, month - 1);
    if (expDate <= now) return "Card has expired.";

    return null;
  },

  cvv(value) {
    if (!/^\d{3,4}$/.test(value)) {
      return "CVV must be 3 or 4 digits.";
    }
    return null;
  },
};

function validateCard(card) {
  const errors = {};

  for (const [field, validate] of Object.entries(validators)) {
    const error = validate(card[field] ?? "");
    if (error) errors[field] = error;
  }

  return {
    valid: Object.keys(errors).length === 0,
    errors,
  };
}

// Try modifying these values
const testCases = [
  { cardNumber: "4111 1111 1111 1111", expiry: "12/27", cvv: "123" },
  { cardNumber: "1234", expiry: "13/22", cvv: "99" },
  { cardNumber: "4000000000001234", expiry: "01/26", cvv: "4321" },
];

for (const card of testCases) {
  const result = validateCard(card);
  console.log("Card:", card.cardNumber);
  if (result.valid) {
    console.log("  Valid!");
  } else {
    console.log("  Errors:", result.errors);
  }
  console.log();
}

Key Takeaways

Client-side validation improves user experience but never replaces server-side validation — always validate on both sides.
The Constraint Validation API provides built-in browser validation through HTML attributes and JavaScript methods like checkValidity().
Custom validators are plain functions: they take a value and return an error message or null. This makes them easy to compose and reuse.
Validate on blur (when a user leaves a field) rather than input to avoid showing errors before a user has finished typing.
Collect all form errors before displaying them — never stop at the first error when validating a full form submission.
Keep validators pure and stateless. A validator should only care about the value it receives, not how it got there.
For password confirmation and similar cross-field rules, pass the related value as an argument rather than reading global state.

Pro Tip: Structure your validators as small, single-purpose functions and compose them into arrays per field. This makes it trivial to reuse rules like required or minLength across every form in your application — and to add new rules without touching existing logic.