HTML Form Validation: Built-in Constraint Validation API

HTML Form Validation

HTML5 introduced built-in form validation that works without JavaScript. The Constraint Validation API provides native validation with customizable error messages.

Validation Attributes

<form novalidate>
  <!-- Required field -->
  <input type="text" name="name" required>

  <!-- Email validation -->
  <input type="email" name="email" required>

  <!-- Pattern matching -->
  <input type="text" name="code" pattern="[A-Z]{3}-\d{4}"
         title="Format: ABC-1234">

  <!-- Length constraints -->
  <input type="text" name="username" minlength="3" maxlength="20">

  <!-- Numeric range -->
  <input type="number" name="age" min="18" max="120" step="1">

  <!-- URL validation -->
  <input type="url" name="website">
</form>

CSS Pseudo-Classes

/* Style valid and invalid fields */
input:valid { border-color: green; }
input:invalid { border-color: red; }

/* Only show errors after interaction */
input:invalid:not(:placeholder-shown) {
  border-color: red;
}

/* Required field indicator */
input:required::after { content: " *"; }

/* In-range and out-of-range values */
input:in-range { background: white; }
input:out-of-range { background: #fee; }

Constraint Validation API

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

// Check validity
input.checkValidity();     // Returns boolean
input.reportValidity();    // Shows browser error bubble

// Custom validation
input.setCustomValidity('Please use your company email');

// Validity state properties
input.validity.valueMissing;    // required but empty
input.validity.typeMismatch;    // wrong type (e.g., invalid email)
input.validity.patternMismatch; // does not match pattern
input.validity.tooShort;        // shorter than minlength
input.validity.tooLong;         // longer than maxlength
input.validity.rangeUnderflow;  // below min
input.validity.rangeOverflow;   // above max
input.validity.stepMismatch;    // does not match step

Best Practices

1. Use native validation attributes as the first layer of defense
2. Add JavaScript validation for complex rules (password strength, etc.)
3. Always validate on the server side — client validation is for UX only
4. Provide clear, specific error messages
5. Use aria-invalid and aria-describedby for accessible error reporting