A11y Form Validator Dependency-light validation for semantic HTML forms

Summary demo

Error Summary

Focusable summary region with field-labelled links that send users back to invalid fields.

Back to demo gallery

Developer notes

This demo imports the error summary addon explicitly, then adds it to a preset that does not include summary UI by default.

Summary fields

<form id="summary-form">
  <input name="fullName" required />
  <input name="email" type="email" required />
  <input name="postcode" required minlength="4" />
</form>

Summary addon import

import { A11yFormValidator } from "./dist/index.js";
import { createErrorSummaryAddon } from "./dist/addons/error-summary.js";
import { createNoSummaryPreset } from "./dist/presets/no-summary.js";

const form = document.getElementById("summary-form");

new A11yFormValidator(form, {
  ...createNoSummaryPreset(),
  focusOnError: "summary",
  addons: [createErrorSummaryAddon()]
});