Build a Form with validation

Question

Accepted Answer

## Building a Form with Validation in React **Mental model:** Keep `values`, `errors`, and `touched` as three maps. Validation is a pure function `values -> errors`. Show a field's error only once it's been touched (or after a submit attempt). Submit is blocked while any error exists. This separates *what's wrong* from *what to show*. ### Step 1 — Three state maps ```jsx const [values, setValues] = useState({ name: '', email: '', password: '' }); const [touched, setTouched] = useState({}); ``` ### Step 2 — Pure validation function ```jsx const validate = (v) => { const e = {}; if (!v.name.trim()) e.name = 'Required'; if (!/^[^@]+@[^@]+\.[^@]+$/.test(v.email)) e.email = 'Invalid email'; if (v.password.length < 8) e.password = 'Min 8 characters'; return e; }; const errors = validate(values); ``` ### Step 3 — Show errors only when touched ```jsx const showError = (k) => (touched[k] || submitted) && errors[k]; setTouched((t) => ({ ...t, [k]: true }))} />

Build a Form with validation

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)