Address validation provides clear error messages
Why it matters
A generic "Validation failed" toast on submit tells the shopper nothing about which of the twelve fields is wrong. They scroll, squint, guess, retry, and leave. Field-specific inline errors — surfaced on blur next to the offending input — turn a recovery into a three-second fix. Screen-reader users are hit hardest: a toast with no aria-live region and no role="alert" on the field error is invisible to them, excluding customers who rely on assistive tech.
Severity rationale
Medium because generic errors slow recovery for everyone and effectively block screen-reader users from completing checkout.
Remediation
Validate on onBlur per field and render a role="alert" span next to the input when validation fails. Write messages that name the rule ("Zip code must be 5 or 9 digits"), not the status ("Invalid"). Place this in src/components/AddressForm.tsx.
if (!/^\d{5}(-\d{4})?$/.test(zip)) return { zip: 'Zip code must be 5 or 9 digits (e.g., 90210)' }
{errors.zip && <span role="alert">{errors.zip}</span>}
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Cart & Checkout UX Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from ecommerce-cart-ux·automated