HTML5 constraint validation #154

Summary#

Implement the HTML5 constraint validation API for form controls.

Validation constraints#

• `required`: value must be non-empty (text inputs, textarea, select, checkbox)
• `pattern`: value must match regex (text-like inputs)
• `min` / `max`: numeric range for number inputs
• `step`: valid increments for number inputs
• `minlength` / `maxlength`: text length constraints
• `type`-based validation: email format, URL format

Validity API#

• `input.validity` returns a `ValidityState` object with boolean flags:
  • `valueMissing`, `typeMismatch`, `patternMismatch`, `tooLong`, `tooShort`, `rangeUnderflow`, `rangeOverflow`, `stepMismatch`, `valid`
• `input.checkValidity()` returns boolean, fires `invalid` event if invalid
• `input.reportValidity()` like checkValidity but also shows validation UI
• `input.validationMessage` returns localized error string
• `input.setCustomValidity(msg)` sets custom error
• `form.checkValidity()` validates all controls
• `form.reportValidity()` validates and shows UI for first invalid control

CSS pseudo-classes#

• `:valid` / `:invalid` match based on constraint validation state
• `:required` / `:optional` match based on required attribute
• `:in-range` / `:out-of-range` for number inputs with min/max

Acceptance criteria#

• All listed constraint types are enforced
• `ValidityState` object returns correct flags for each constraint
• `checkValidity()` and `reportValidity()` work on both elements and forms
• `invalid` event fires when validation fails
• CSS pseudo-classes match correctly
• Custom validity via `setCustomValidity()` works
• Tests cover each constraint type, the validity API, and pseudo-class matching

Dependencies#

• Form element parsing and DOM interfaces