Example 06 · Validation feedback

Accessible error states

Show incomplete and server-rejected code errors in visible text, synchronize the input’s invalid state, and keep recovery focused on the real control.

Live example

Trigger and recover from an error

An incomplete value uses built-in validation. A complete value simulates a server rejection with setError().

Implementation

Build this example

Create one field instance so your submit handler can call validate() and report a server response with setError().

JavaScript

Only simulate the server error after the local completeness check passes.

import { createA11yOtpField } from "./dist/index.js";

const root = document.querySelector("[data-a11y-otp]");
const otp = createA11yOtpField(root);

document.querySelector("#verification-form")
  .addEventListener("submit", (event) => {
    event.preventDefault();
    if (!otp.validate()) return;

    otp.setError("The code does not match. Check it and try again.");
  });

HTML

Give the error and hint stable elements inside the component root.

<form id="verification-form">
  <div class="a11y-otp" data-a11y-otp
    data-otp-length="6" data-otp-type="numeric">
    <label for="error-code">Verification code</label>
    <p id="error-code-hint">Enter the 6-digit code.</p>
    <div class="a11y-otp__control">
      <input class="a11y-otp__input" id="error-code"
        name="errorCode" type="text" inputmode="numeric"
        autocomplete="one-time-code" maxlength="6"
        aria-describedby="error-code-hint" />
    </div>
    <p class="a11y-otp__error"></p>
    <p class="a11y-otp__status" aria-live="polite"></p>
  </div>
  <button type="submit">Verify</button>
</form>