# Best Practices for Inline Validation Timing

This recipe defines exactly when each inline validation message should fire — on input, on blur, or on submit — so feedback arrives at the moment it helps and never while the user is mid-keystroke. It is the timing companion to Inline Error Messaging Strategies, which covers the DOM and ARIA wiring; here the focus is solely on the when.

Poorly timed feedback interrupts flow and inflates abandonment; correctly timed feedback feels like a guide rail. A robust field lifecycle tracks five states — untouched → focused → dirty → validating → valid/invalid — and the trigger you bind to each transition decides the experience.

# When to Use This Recipe

Reach for these timing rules when:

• You validate fields individually as the user works through the form, not only at submit.
• A field’s correct trigger depends on its type — a format-checked email behaves differently from a live password-strength meter.
• You see error messages flashing before the user finishes typing, or appearing too late to feel responsive.

If you are still deciding whether to validate live at all versus deferring everything to submit, start with Real-Time vs On-Submit Feedback Timing first, then return here to tune the live path.

# The Trigger Decision, by Field Semantics

The governing rule: a field stays silent until touched, validates on blur for format, and only escalates to live input validation after its first error so corrections feel immediate.

# Minimal Working Implementation

This self-contained controller encodes the lifecycle and the touched-gated, blur-first rule. It calls checkValidity() against a <form novalidate> so the native bubble never appears and you own the messaging.

// timed-field.ts — touched-gated inline timing controller
type Trigger = "blur" | "input";

interface TimedFieldOptions {
  /** Re-validate live on input after the first error. */
  liveAfterError?: boolean;
  /** Debounce window for the live input path, in ms. */
  debounceMs?: number;
}

export function bindTimedField(
  input: HTMLInputElement,
  render: (input: HTMLInputElement, message: string) => void,
  options: TimedFieldOptions = {},
): () => void {
  const { liveAfterError = true, debounceMs = 350 } = options;
  let touched = false;
  let hasError = false;
  let timer: ReturnType<typeof setTimeout> | null = null;

  const validate = () => {
    hasError = !input.checkValidity();
    render(input, hasError ? input.validationMessage : "");
  };

  const onBlur = () => {
    touched = true; // first interaction complete
    validate();
  };

  const onInput = () => {
    if (!touched) return; // stay silent until the field is touched
    if (!hasError && !liveAfterError) return; // only go live after an error
    if (timer) clearTimeout(timer);
    timer = setTimeout(validate, debounceMs); // debounce the live path
  };

  input.addEventListener("blur", onBlur);
  input.addEventListener("input", onInput);

  // Cleanup for SPA teardown.
  return () => {
    input.removeEventListener("blur", onBlur);
    input.removeEventListener("input", onInput);
    if (timer) clearTimeout(timer);
  };
}

For the async availability case, wrap the network call so a new keystroke cancels the previous request, the pattern detailed in Cancelling Stale Async Validation with AbortController.

# Coordinating announcements with the lifecycle

The same timing that governs visual messages governs screen-reader announcements. Update aria-invalid synchronously with the visual class so they never diverge, but write the live-region text only after validation settles — and only on a state change — so the screen reader isn’t flooded with one announcement per debounced tick.

// announce.ts — sync visual state now, announce only on change
let lastState: boolean | null = null;

export function announceIfChanged(input: HTMLInputElement, message: string): void {
  const invalid = message.length > 0;
  input.setAttribute("aria-invalid", String(invalid)); // synchronous

  if (invalid === lastState) return; // no transition — stay quiet
  lastState = invalid;

  const live = document.getElementById("a11y-live");
  if (live) {
    live.textContent = ""; // clear so identical text re-announces
    requestAnimationFrame(() => { live.textContent = message; });
  }
}

# Option Reference

# Verification Steps

Confirm the timing behaves with a quick DevTools check and an automated assertion:

• In DevTools, set Network throttling to Slow 3G and watch the async path: only one request should be in flight after a typing burst, and earlier ones should show as (canceled).
• Add console.time("validate") / console.timeEnd("validate") around validate() to confirm it runs once per debounce window, not per keystroke.

// timing.spec.ts — Playwright: no error until blur, then live
import { test, expect } from "@playwright/test";

test("email stays silent until blur, then validates live", async ({ page }) => {
  await page.goto("/signup");
  const email = page.locator("#email");
  const error = page.locator("#email-error");

  await email.type("name@");        // mid-typing
  await expect(error).toBeHidden(); // silent: not touched/blurred yet

  await email.blur();
  await expect(error).toBeVisible(); // format error on blur

  await email.focus();
  await email.type("domain.com");          // live re-check after error
  await expect(error).toBeHidden();        // clears as soon as it's valid
});

# Edge Cases & Failure Modes

Paste floods the validator. A paste fires input with a complete value, which can trigger a premature error on a field the user is still assembling. Detect it via InputEvent.inputType === "insertFromPaste" and defer validation until the next real keystroke or blur.

input.addEventListener("input", (e) => {
  if ((e as InputEvent).inputType === "insertFromPaste") return; // wait for blur
  // …normal debounced path
});

Screen readers re-announce too aggressively. If you update an aria-live region on every debounced tick, speech floods. Announce only on a state change (valid→invalid or invalid→valid), not on every validation run. VoiceOver also needs the text node replaced to re-announce, whereas NVDA handles a text update — test both.

Submit bypasses the touched gate. On submit, every field must validate regardless of whether it was touched, or untouched required fields slip through. Run a full pass on submit and mark all fields touched before routing focus, which hands off to Managing Focus After Validation Failure.

// submit-pass.ts — validate everything on submit, then route focus
export function validateAllOnSubmit(
  form: HTMLFormElement,
  controllers: Map<string, { markTouched: () => void; run: () => void }>,
): boolean {
  controllers.forEach((c) => { c.markTouched(); c.run(); }); // force every field
  return form.checkValidity();
}

Debounced timer outlives the component. In an SPA, a field can unmount while a debounce timer is still pending, firing a validation against a detached node. The cleanup function returned by bindTimedField clears the timer on teardown — always call it in your component’s unmount hook.

Autofill skips the blur-first rule. Browser autofill can populate a field without ever firing blur, leaving a touched-gated validator silent on a value the user never typed. Treat a change event from an autocompleted field as a touch: mark the field touched and validate immediately, so an autofilled-but-invalid value still surfaces before submit.

input.addEventListener("change", () => {
  if (input.matches("input[autocomplete]")) {
    touched = true;   // an autofill counts as interaction
    validate();
  }
});

# Related Guides

• Inline Error Messaging Strategies — the DOM and ARIA wiring these timing rules drive.
• Real-Time vs On-Submit Feedback Timing — the higher-level choice between live and deferred validation.
• Cancelling Stale Async Validation with AbortController — the timing primitive for the async availability case.
• Managing Focus After Validation Failure — what happens at the submit boundary when timing hands off to focus routing.

← Back to Inline Error Messaging Strategies