{"skill":{"slug":"form-validation","displayName":"Form Validation","summary":"Deep form validation workflow—schemas, sync vs async rules, UX patterns, accessibility, and server parity. Use when building complex forms, multi-step wizard...","description":"---\nname: form-validation\ndescription: Deep form validation workflow—schemas, sync vs async rules, UX patterns, accessibility, and server parity. Use when building complex forms, multi-step wizards, or reducing validation bugs.\n---\n\n# Form Validation\n\nValidation combines **correctness** and **UX**: when errors appear, how they are announced, and how client rules match the server.\n\n## When to Offer This Workflow\n\n**Trigger conditions:**\n\n- Long forms, wizards, or multi-step checkouts\n- Accessibility audits flagging unclear errors\n- Mismatch between client-side “valid” and API rejection\n\n**Initial offer:**\n\nUse **six stages**: (1) model & schema, (2) rule layers, (3) UX timing, (4) accessibility, (5) async & server parity, (6) testing). Confirm framework (React Hook Form, Formik, native, etc.).\n\n---\n\n## Stage 1: Model & Schema\n\n**Goal:** Single schema (Zod, Yup, JSON Schema) as source of truth; share with backend when feasible.\n\n---\n\n## Stage 2: Rule Layers\n\n**Goal:** Separate required/format rules from cross-field rules (e.g., date range); isolate async checks (username available) from fast inline validation.\n\n---\n\n## Stage 3: UX Timing\n\n**Goal:** Choose onBlur vs onSubmit per field; avoid shouting on every keystroke unless real-time feedback is a product requirement.\n\n---\n\n## Stage 4: Accessibility\n\n**Goal:** Associate errors with fields via `aria-describedby`; move focus to first error on submit; use live regions judiciously.\n\n---\n\n## Stage 5: Async & Server Parity\n\n**Goal:** Map API validation errors to fields; handle race conditions on slow networks; idempotent submit with dedupe if needed.\n\n---\n\n## Stage 6: Testing\n\n**Goal:** Unit-test schema; e2e critical paths including server error mapping.\n\n---\n\n## Final Review Checklist\n\n- [ ] Schema aligned or shared with server\n- [ ] Validation timing and copy defined\n- [ ] Accessible error patterns\n- [ ] API errors mapped to UI\n- [ ] Tests for schema and flows\n\n## Tips for Effective Guidance\n\n- Server rules always win—document intentional client shortcuts.\n- Pair with **ux-writing** for error microcopy.\n\n## Handling Deviations\n\n- Wizards: validate per step and on final submit; persist drafts securely.\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":481,"installsAllTime":18,"installsCurrent":0,"stars":1,"versions":1},"createdAt":1774398298820,"updatedAt":1778492171908},"latestVersion":{"version":"1.0.0","createdAt":1774398298820,"changelog":"form-validation 1.0.0 – Initial release\n\n- Introduces a deep form validation workflow covering schema modeling, validation rule layering, UX/error display timing, accessibility, async/server parity, and testing.\n- Includes a six-stage process: (1) schema, (2) rule layers, (3) UX, (4) accessibility, (5) async/server parity, (6) testing.\n- Provides when-to-use guidelines, server/client parity tips, and a final checklist for implementation quality.\n- Emphasizes accessibility, error mapping, and parity between frontend validation and backend rules.\n- Suggests best practices for wizard forms and integrating with UX writing.","license":"MIT-0"},"metadata":null,"owner":{"handle":"mike47512","userId":"s17916ncgb6bpm0fs1wdm6932d83gha4","displayName":"mike47512","image":"https://avatars.githubusercontent.com/u/199718167?v=4"},"moderation":null}