Forms & Validation

Handling HTML forms with JavaScript — FormData, Constraint Validation API, custom validators, and controlled vs uncontrolled inputs.

What it is, in plain English: HTML forms let users submit data. JavaScript enhances them: you can prevent the default submission, read values with FormData, validate on the client using the Constraint Validation API (built into HTML), add custom validation logic, and show helpful error messages. Client-side validation is for user experience — always validate again on the server.

Intercepting form submissions and reading values

The submit event — take control of form submission

const form = document.getElementById("signup");

form.addEventListener("submit", (event) => {
  event.preventDefault();  // stop the page from reloading (default behaviour)

  // Read values by name:
  const email    = form.querySelector('[name="email"]').value;
  const password = form.querySelector('[name="password"]').value;

  // Or use FormData — easier for multiple fields:
  const data = new FormData(form);
  console.log("Email:",    data.get("email"));
  console.log("Password:", data.get("password"));
  console.log("All data:", Object.fromEntries(data));  // → plain object
});

HTML5 built-in validation (Constraint Validation API)

<!-- HTML attributes trigger automatic validation: -->
<input type="email"    required>            <!-- must be a valid email -->
<input type="number"   min="0" max="100">   <!-- 0-100 only -->
<input type="text"     minlength="3" maxlength="50">
<input type="text"     pattern="[A-Z]{3}-\d{4}">  <!-- regex pattern -->
<input type="url"      required>            <!-- must be a URL -->

// Check validity in JavaScript:
const emailInput = document.querySelector('[name="email"]');

// Check if valid:
console.log(emailInput.checkValidity());  // true/false

// Get validation details:
const v = emailInput.validity;
console.log(v.valueMissing);    // required field is empty
console.log(v.typeMismatch);    // wrong type (e.g. not an email)
console.log(v.patternMismatch); // doesn't match pattern attribute
console.log(v.tooShort);        // below minlength

// Show the browser's built-in error bubble:
emailInput.reportValidity();

Custom validation messages

const emailInput = document.querySelector('[name="email"]');

emailInput.addEventListener("input", () => {
  const email = emailInput.value;

  if (!email.includes("@")) {
    emailInput.setCustomValidity("Please include an @ symbol");
  } else if (!email.includes(".")) {
    emailInput.setCustomValidity("Email must have a domain (like .com)");
  } else {
    emailInput.setCustomValidity("");  // empty string = valid
  }
});

// Custom error message shows in the browser tooltip on reportValidity()

Try It Yourself

// Form validation — demonstrating the Constraint Validation API
// (This runs in the browser, but without real HTML form elements)
// We'll simulate the validation logic:

function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function validatePassword(password) {
  const rules = {
    length:    password.length >= 8,
    uppercase: /[A-Z]/.test(password),
    lowercase: /[a-z]/.test(password),
    digit:     /[0-9]/.test(password),
  };
  return {
    valid: Object.values(rules).every(Boolean),
    rules,
  };
}

// Test validation:
const emails = ["alice@example.com", "notanemail", "missing@dot", "ok@test.co"];
emails.forEach(email => {
  console.log(`${email}: ${validateEmail(email) ? "✓ valid" : "✗ invalid"}`);
});

console.log("");

// FormData usage (in a real form):
const FORM_EXAMPLE = \`
<form id="signup">
  <input name="email" type="email" required>
  <input name="password" type="password" minlength="8" required>
  <button type="submit">Submit</button>
</form>

console.log("\nFormData pattern ready for real HTML forms.");

Custom validation, real-time feedback, and controlled inputs

A complete validation system

const validators = {
  required: (v) => !!v.trim() || "This field is required",
  email:    (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || "Invalid email address",
  minLen:   (n) => (v) => v.length >= n || `Minimum ${n} characters`,
  maxLen:   (n) => (v) => v.length <= n || `Maximum ${n} characters`,
  matches:  (other, label) => (v, formValues) =>
    v === formValues[other] || `Must match ${label}`,
  password: (v) =>
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(v) ||
    "Min 8 chars with uppercase, lowercase, and digit",
};

// Validate a field against multiple rules:
function validateField(value, rules, allValues = {}) {
  for (const rule of rules) {
    const result = rule(value, allValues);
    if (result !== true) return result;  // first failing rule's message
  }
  return null;  // null = valid
}

// Validate the whole form:
function validateForm(formData, schema) {
  const errors = {};
  for (const [field, rules] of Object.entries(schema)) {
    const error = validateField(formData[field] ?? "", rules, formData);
    if (error) errors[field] = error;
  }
  return errors;
}

const schema = {
  email:    [validators.required, validators.email],
  password: [validators.required, validators.password],
  confirm:  [validators.required, validators.matches("password", "password")],
};

const result = validateForm(
  { email: "alice@example.com", password: "Abc1234!", confirm: "Abc1234!" },
  schema
);
console.log(result);  // {} — empty = all valid

Real-time validation with visual feedback

// Show errors as the user types (after they've left the field first):
function setupValidation(input, rules, errorEl) {
  let touched = false;

  input.addEventListener("blur", () => {
    touched = true;
    validate();
  });

  input.addEventListener("input", () => {
    if (touched) validate();  // only show errors after first blur
  });

  function validate() {
    const error = validateField(input.value, rules);
    if (error) {
      input.classList.add("error");
      errorEl.textContent = error;
    } else {
      input.classList.remove("error");
      errorEl.textContent = "";
    }
    return !error;
  }

  return { validate };
}

FormData internals and the Constraint Validation spec

FormData — beyond text inputs

// FormData handles all input types:
const fd = new FormData(form);

fd.get("name");          // single value
fd.getAll("tags[]");     // multiple values (checkbox group, multiple select)
fd.has("avatar");        // check if field exists

// Build manually:
const manual = new FormData();
manual.append("title",  "My File");
manual.append("file",   fileInput.files[0]);      // File object
manual.append("tags",   "js");
manual.append("tags",   "web");  // multiple values for same key

// Send with fetch (browser sets Content-Type: multipart/form-data automatically):
await fetch("/api/upload", { method: "POST", body: manual });

// Convert to plain object (loses multiple values for same key):
Object.fromEntries(fd);   // use fd.getAll(key) for multi-value fields

// Iterate all entries:
for (const [key, value] of fd.entries()) {
  console.log(key, value);
}

Constraint Validation API spec (HTML Standard)

Every form element implements the ElementInternals mixin with a ValidityState object (input.validity) that has flags: valueMissing, typeMismatch, patternMismatch, tooLong, tooShort, rangeUnderflow, rangeOverflow, stepMismatch, badInput, and customError. setCustomValidity("") clears the customError flag. Custom Elements can participate in form validation via attachInternals().setValidity().

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.