Example 04 ยท Validator addon

Hand errors to an existing owner.

The bridge normalizes a rejected payload, then the form-validator addon gives it to an existing validator-style instance instead of rendering a second error system.

Integration contract

One renderer owns the result.

This demo uses a small local stand-in for the optional peer's public instance methods. It does not bundle or imitate the full peer package.

Try it

  1. Apply the rejected response.
  2. Notice the validator-owned summary receives focus.
  3. Edit either field to trigger the addon's clear contract.
  4. Reset and repeat with the keyboard.
addon.form-validatorexisting instance

Invite a teammate

The local validator instance owns all visible error rendering in this example.

Ready to demonstrate the addon handoff.

Implementation

Inject, do not duplicate.

Developer notes

  • Import createFormValidatorAddon from its addon subpath.
  • Pass an existing validator instance to the addon.
  • The addon claims field and form rendering.
  • The bridge does not destroy an externally owned instance.

Accessibility notes

  • The local instance uses native lists and linked descriptions.
  • Its summary is programmatically focusable after rejection.
  • Input editing invokes the addon's clear behavior.
  • The actual optional peer must be tested separately in the consuming application.
  • No claim is made that this local stand-in covers the peer's complete behavior.

Copy path

How to use it.

  1. Create the form-validator instance that will own visible errors.
  2. Pass that instance to createFormValidatorAddon().
  3. Add the addon when creating the bridge so a second renderer is not introduced.

HTML

<form id="invite-form" data-a11y-server-error-bridge>
  <section data-validator-summary hidden tabindex="-1"></section>
  <label for="invite-email">Email address</label>
  <input id="invite-email" name="email" type="email">
  <p id="invite-email-error" data-validator-error-for="email" hidden></p>
  <button type="submit">Send invitation</button>
</form>

JavaScript

import { createServerErrorBridge } from "../../dist/index.js";
import { createFormValidatorAddon } from
  "../../dist/addons/form-validator.js";
import { createFormValidator } from "a11y-form-validator";

const form = document.querySelector("#invite-form");
const validator = createFormValidator(form);
const bridge = createServerErrorBridge(form, {
  addons: [createFormValidatorAddon({
    validator,
    focusOnApply: true
  })]
});