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. Submit empty, correct one linked field, and leave it to see that isolated validation removes only that stale summary entry.

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()]
});