Client-Side and Server-Side Form Validation in Nuxt with Daniel Kelly (Pt 2)
summary
Live coding shows a Nuxt registration flow that reuses one Zod schema for both client and server validation, including FormKit + Zod plugin integration, async refine checks against /api/user-exists, and custom messages for UX. Server uses H3 readValidatedBody and returns 422 with an issues array on failure. Uses z.coerce for numeric query inputs, switches to safeParseAsync when refine is async, and demonstrates prefilling valid form defaults from the URL with partial validation.
AI-written summary · about
chapters (8)
- 0:00Form validation setup
- 1:49Zod validation rules
- 6:33Zod with FormKit client side
- 9:26Server-side validation with Zod
- 14:27Validation errors 422
- 21:21Async email check refine
- 27:10Prefill forms query params
- 38:44Q&A
related talks
28mBuilding validated forms with great UX in React
28mThe Art of Form Validation
01h 08mVue.js: Forms & validations in the composition age
34mDesigning form validation the right way
21mVue Form Validations with Vest
09mProgressive Form Validation in Vue.js
29mScalable Forms in Vue
38mBuilding Forms for an Engaging User Experience in Vue.js