Example 02 ยท Payload adapters

Compare four API shapes.

Apply field envelopes, flat field objects, arrays of error records, or RFC 9457-style Problem Details without changing the form markup.

Adapter lab

One recovery surface, varied responses.

Select a payload. The preview shows the exact local object passed to the bridge.

Try it

  1. Apply each payload shape.
  2. Compare the preview with the rendered messages.
  3. Edit a field to clear its linked error.
  4. Use Reset between cases.
adapter.inputlocal JSON

Update your profile

The field names deliberately match the response keys.

Choose a payload to begin.

Payload preview

{
  "fields": {
    "email": "That address is already in use."
  }
}

Implementation

Adapters stay explicit.

Developer notes

  • Default shapes use the core adapter.
  • Problem Details imports dist/adapters/problem-details.js.
  • The adapter is registered as problem-details before use.
  • The bridge is initialized once for all four cases.

Accessibility notes

  • Every payload button is a native toggle button with visible text and a programmatic pressed state.
  • The preview is readable text, not a required interaction.
  • Status text announces which local payload was applied.
  • Focus and error linking use the same behavior regardless of payload shape.
  • Malformed production payloads should also be tested.

Copy path

How to use it.

  1. Use ordinary labelled controls and the optional form-error region.
  2. Register the Problem Details adapter once on the bridge.
  3. Select the adapter when applying RFC 9457 payloads; core payload shapes need no registration.

HTML

<link rel="stylesheet" href="../../dist/styles.css">

<form id="profile-form" data-a11y-server-error-bridge>
  <div data-a11y-server-error-bridge-form-errors></div>
  <label for="profile-email">Email address</label>
  <input id="profile-email" name="email" type="email">
  <button type="submit">Save profile</button>
</form>

JavaScript

import { createServerErrorBridge } from "../../dist/index.js";
import { problemDetailsAdapter } from
  "../../dist/adapters/problem-details.js";

const form = document.querySelector("#profile-form");
const bridge = createServerErrorBridge(form);
bridge.registerAdapter("problem-details", problemDetailsAdapter);

bridge.applyErrors(problemDetailsPayload, {
  adapter: "problem-details"
});