HomeChallengesRepsProblemsLeaderboardTake a challenge

Form Validation Sprint

A contact form with React Hook Form and Zod: real rules, real messages, no double submits.

Intermediate15 min on the clock6 graded checks · 100 pointsReact + UI SprintPro
Graded by reading your code against the checklist below.

What you build

  • Define a Zod schema with a rule and a message per field
  • Wire it to React Hook Form with zodResolver
  • Render each field error where the user can see it
  • Disable the submit button while the form is submitting
  • Tie every label to its input

Done means

Submitting empty shows a message per field; a valid submit disables the button while it runs.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

  1. Define a Zod schema+20Form validation
  2. Give each field a rule and a message+15Form validation
  3. Wire the schema to React Hook Form+20Form validation
  4. Render the error messages+15Form validation
  5. Disable submit while it is submitting+15Loading and error states
  6. Tie every label to its input+15Accessibility

What it teaches

The rest of React + UI Sprint