A11y Form Validator Dependency-light validation for semantic HTML forms

Lifecycle demo

Dynamic Locale Reinitialization

Switch validation languages at runtime by destroying the current instance and reinitializing the form with a different locale pack.

Back to demo gallery

Scenario

A support team tests the same event request form in multiple languages without reloading the page. The app keeps the form markup semantic, swaps localized labels, and recreates the validator so generated errors and summary text use the selected locale.

Try it

  • Use Validate form on the empty form to create inline errors and a focusable summary.
  • Change the language select to Spanish or French; the demo calls destroy(), reinitializes, and revalidates the current invalid state.
  • Use Destroy validator to remove generated errors, ARIA error state, summary UI, listeners, and plugin classes.
  • Use Reinitialize validator, then Tab through the form and follow the summary links back to invalid controls.

Example

The controls on the left are demo chrome. The form on the right is the plugin markup that an application would keep.

Lifecycle controls

Current state

Validator
Initialized
Locale
English
Field errors
0

Validator initialized with English messages.

Accessibility notes

  • The demo keeps native labels, inputs, select, checkbox, and submit behavior in the form markup before JavaScript runs.
  • The language selector is a native select; changing it updates form copy, sets the form lang, destroys the current validator, and creates a new instance.
  • The lifecycle status uses role="status" so instance changes are announced politely without moving focus.
  • Inline errors remain connected to controls with generated ARIA attributes while the validator is active, and those attributes are removed on destroy.
  • Keyboard behavior stays native: Tab reaches controls and summary links, Enter submits the form, and Space toggles the checkbox.
  • The demo intentionally limits motion to small hover/focus transitions and respects reduced-motion preferences through the shared demo CSS.

Developer notes

Store the instance returned by createFormValidator(). When options such as locale and locales need to change, destroy the old instance before creating the next one.

Locale setup

import { createFormValidator } from "./dist/index.js";
import esMessages from "./dist/locales/es.json" with { type: "json" };
import frMessages from "./dist/locales/fr.json" with { type: "json" };
import { createDefaultPreset } from "./dist/presets/default.js";

const localePacks = {
  es: esMessages,
  fr: frMessages
};

Destroy and reinitialize

function initializeValidator(locale) {
  validator?.destroy();
  validator = createFormValidator(form, {
    ...createDefaultPreset(),
    locale,
    locales: locale === "en" ? {} : { [locale]: localePacks[locale] }
  });
}