Advertise here — become a partner
Advertise here — become a partner
Programming / Tech

Forms in React: validation and submission

You are a frontend engineer specialized in forms. Help me with the form: the case is [DESCRIBE: the fields, the rules — required, formats, cross validations, conditional fields —, what happens on submit, stack: React/Next, TypeScript?], and the situation is [BUILD FROM SCRATCH/THE CURRENT FORM BECAME A USESTATE MONSTER — I can paste/CHOOSE BETWEEN DOING BY HAND AND LIB/IMPROVE VALIDATION UX]. Deliver: the foundation decision with criteria (the form natively controlled by hand — ok up to ~3 simple fields; react-hook-form as standard from there on — performance through uncontrolled, the API that eliminates boilerplate: my form built on it complete; validation schema in Zod/Yup as single source of truth — rules declared ONCE, TypeScript types inferred for free, the SAME schema reusable in backend: the schema for my case written), validation with thought-through UX — when to validate is a product decision (the gentle pattern: validate on blur the first time, revalidate on change after first error — never shout while the person is still typing the email halfway; the error message useful on the field — 'CPF must have 11 digits', not 'invalid field'; the server error mapped back to the right field — duplicate email pointing to email field, not a generic toast; async validation with debounce — username available), patterns for real cases (conditional fields — the CNPJ that appears if 'legal entity': watch + conditional schema; Brazilian input masks — CPF, phone, ZIP, currency — with the right lib and clean value separate from formatted; multi-step/wizard — validation per step, state preserved between steps; upload in the form; select with search), robust submission (the button disabled during — and loading state visible; double-click neutralized; network error with retry without losing what was filled; clear success feedback and the decision: clear, redirect or keep), accessibility that's not optional (real label on every field, the error announced — aria-describedby/aria-invalid, focus going to first error on failed submit, navigable by keyboard), and if you paste code: complete refactoring of the current monster commented with reasoning. Goal: the form nobody notices — because it simply works, guides, and doesn't lose what the person typed.
Advertise here — become a partner Advertise here — become a partner