React Form Validation Tutorial 2022 | react-hook-form and zod

In this tutorial you will learn how to build a form in React with validation using react-hook-form and zod.

We will cover how to validate form fields such as an email field, a required checkbox, and radio buttons. You will learn how to use react-hook-form to check different form states like when the form has an error or when the form is submitting. You will learn how to use zod to make your own custom error messages.

After watching this tutorial you will have the necessary skills to use react-hook-form and zod to build your own forms and validations.

00:00 - Introduction
00:28 - zod form validation
02:49 - react-hook-form
03:21 - Form debugging
03:38 - Registering inputs
04:18 - Form submission
05:12 - Form errors
06:19 - Custom error messages
07:00 - Async form submission
08:28 - Disabling form

[DeviousLab]

Hi Austin, I have tried implementing the same zod rules in a project of mine, but the custom error for accepting the Terms of Service doesn't seem to be working and I get 'Invalid literal value, expected true'. After opening your source code in Stackblitz, I get the same error message as well. Any ideas?

[tonyg_nerd]

I just watched this and your other React/Zod vid for the first time. You have some great tips, the vids are clear, concise, and well-edited. I need to rewatch for the detail. Please do keep it up.

[mr.random]

Yeah would love to see how you handle multi-step forms, having zod only validate only fields on a particular step.

[JustPerfectDesigns]

You're a great content creator.
I'm a fan now. But please, try increasing the font size of your code editor. You can just hold ctrl and the click on the plus (+) key to increats it at least twice. Some of us might be watching with a phone and it is too tiny even on PC.

Overall, great content. Thanks always!

[menaaziz]

Glad that I found your channel!
Great quality and straight to the point .. Thank you!

[liammullan]

Great video, thanks Austin! (Perfect english btw)

[eleah]

This is good. I would be interested in more examples. Thanks.

[tuppers]

Awesome video there pal 🙂 could you possibly look at creating a video around abstracting different form elements into their own components? I find that there is a lot of repeated code across say Input fields but have not quite figured out how to abstract this 😞

[klausoficial]

Great content. Clear and to the point !

[allisfehr]

Great video. Any clue how to use 'refine' with an array instead of a single value (ie. checkbox input)? Something like this except the includes(val) part is giving me an error.

optionsList: => options.map((option) => option.name).includes(val))