React Hook Form with ZOD Tutorial - React and Typescript Form Validation Tutorial

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech/. The first 200 of you will get 20% off Brilliant’s annual premium subscription.
In this video we go over react form validation using zod and react hook form.
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: [e-mail]
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
REACT HOOK FORM ZOD TIMESTAMPS
00:00 | Intro
01:51 | Introduction to the Zod Library
02:58 | Installing Packages
03:41 | Creating the structure of the Form
06:30 | Defining Form Structure using Zod
18:33 | How to display Error Messages
#reactjs #coding

[@PedroTechnologies]

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/PedroTech/. The first 200 of you will get 20% off Brilliant’s annual premium subscription.

[@yutsacarm8021]

how to use hostinger with nodemailer

[@delavalom]

You could also transform the structure of your schema into TypeScript by typing: `type FormData = z.infer`
This way you save yourself the boilerplate and also allow TypeScript to infer your schema type.
By the way, great tutorial about forms.

[@eazydatasolutions5800]

I was also about to suggest the TypeScript infer to transform the Schema to a type instead of redoing it.😜

[@JoelRdz]

How do you do this? if I try it "schema" is in the App scope so it doesn't detect it

[@delavalom]

⁠@@JoelRdz Well, the thing is that you shouldn’t define the zod schema inside the App component since it doesn’t need to change in every render. You even can define the schema in another file like a config file and export it.

[@rizkyhady4795]

yeah, but is there a way to make number input (and other type of input like datepicker etc) that can't be empty when submit (required field validation) but with initialValue of empty/null using this `z.infer` ?

[@prashlovessamosa]

Hey Pedro i want more Typescript stuff in future I love TS.

[@PedroTechnologies]

More to come!

[@thelimi2j]

Great tutorial, helped me finalize my choice on using Zod for form validation. Thank you.

[@ogheneminesmart8680]

anytime i want to learn something, ill first check if you have a video for it, cause your style of explanation is so simple and we developers can take what u teach then scale it up ... welldone, keep it up 🤗

[@wallace_lw]

pedro again, with another great timing

[@risbelsuarezrodriguez9608]

It was really a very good video, I hope you continue making many more, thank you very much teacher Pedro...

[@hardwired89]

Thank you for zod tutorial, hope next content is about next, ts and react query mutation.

[@user-vh1nl7qx7t]

Awesome and simple explanation!!

[@shinmini99]

thanks for sharing this awesome tutorial🔥🔥🔥

[@faizanahmed9304]

Thanks man 😊

[@gaganprakash4071]

helped a lot thanks man

[@natemueller5985]

Excellent video! Right to the point.

[@mjbalcueva6485]

the auto complete package in your terminal looks really cool

[@Nanashi-rq7lk]

Nice turtorial,Thanks

[@andresantos-ud4ht]

thank you sir ✌️

[@skverskk]

Well done!

[@zaheerabbas8344]

very good explaination, fully understand❤❤❤❤

[@Unknown-ee7db]

Nice one
💌

[@muhammadkhalil4043]

Awesome Video

[@rjborba]

Hey, thanks for the tutorial! It was pretty useful.
If I may, I would like to add a concern about initialization the schema inside the component render function. It hames this schema creation happen every rerender of your component. Even though it doesn't seem to be a expensive operation, it maybe could be done outside the component scope.

[@Doppio_00]

It's good to be brief.

[@togya4]

pedro you are jut the best

[@nickmorton5595]

Nice video!!

[@alibaghbani3860]

the best🙏

[@crisi6754]

The react GOAT ❤️

[@NosurfOfficial]

Thanks!

[@saqibkhan8257]

Hello, I have bought the subscription on brilliant Just keep doing what you do you have helped me alot❤

[@PedroTechnologies]

Great to hear :) Thank you for the support!

[@manoj.k.m4302]

Wow! Never thought Zod is cool.its is better than yup because of its typescript support and ease

[@PedroTechnologies]

Yesss!

[@bisolaonaolapo6089]

Awesome video! Love the vs code theme...can you share what theme you use? Thanks!

[@codewithguillaume]

Again a very good tutorial Pedro ❤

[@prashlovessamosa]

Your tailwind course is awesome man I learnt a lot thanks for sharing free knowledge.

[@codewithguillaume]

@@prashlovessamosa hey bigsamosa thank you my friend that is so nice ! Hope you enjoyed ;)

[@TheSharkbeast]

this is Some hyperion class Resource! thank you so much !!!
Also id like to request a video on a project based graphql-apollo client react-tsx video : since we are all comfortable with ts thanx to your react course

[@FULLUPE1]

❤ always on point thanks bro ❤

[@PedroTechnologies]

Always welcome!

[@Lunolux]

great video

[@eliuddyn]

Amazing 🔥🔥

[@PedroTechnologies]

Glad you like it!

[@weldonkipsang3332]

Hi can you start vue training tutorials.I have passed through your react series and love them

[@sandangmakmur4475]

Bro, can you make tutorial on shad cn ui?

[@kulvirsingh4568]

Thank you

[@PedroTechnologies]

You're welcome!

[@4v4]

What's the extension that shows packages as you write them in the terminal? This is so cool!

[@user-kj3ch2yv6q]

Hello, can you tell me at 4:30 what is the command suggestion and autocomplete plugin that appears when you type a command in the terminal?

[@jasonterry9343]

Could you please do an example where you use this with a componentized form (one where the inputs have been extracted out as reusable components?)

[@FunkyToe369]

Another benefit of zod is that it's commonly used for backend validation too so if you have a full stack typescript project you can easily share the same validations on both front and backend for end to end type safety

[@PedroTechnologies]

For sure!!

[@tajko]

Hi Pedro, what I am working with Next 13 and need a library which is simple or tool to send e-mails when having a contact form which I have created with Typescript and React HOok Form. Which tool do you use to send emails?

[@iamronish007]

Make a full beginner video about zod pedro

[@georgios_georgiou]

I do have a very similar configuration and it seems that refine is having trouble finding the confirm password to be the same with password (so it doesn't really update the errors object correctly).
Any thoughts ?
Also can you specify zod, react-hook-form, resolvers versions for this ?

[@James66662]

nice tut , actually if think about it you don't need the min or max for confirm password because you have the refine that has to match

[@AnuragMishra-ws4zc]

Hey pedro plz next js series

[@cevdet-gt3uu]

What is the extension in 4:30 ?

[@jhondoe2785]

nice

[@pranupranav6279]

We can create type in one line like TFormData=z.infer;

[@miketepes8208]

how to trigger validation if it is multi step form?

[@HeitorYT]

What is that "gzipped" that apears in front of the "import react from 'react'"?

[@edward6408]

Pedro, how do you feel about doing an overview of the t3 stack?

[@PedroTechnologies]

Yess!

[@iamronish007]

pedro bring upp a best crash course on tRPC .

[@TheCrowdel]

i don't know general zod create library for web development

[@fallanstar]

Sir Plz Start React Native Tutorials as well as with Real time industry Projects plz sir

[@owoeyetemidire7956]

I want to make the input field to be a component, cause I'm creating a login and sign up page and i don't want to be rewriting the same code... how do I do this while also implementing zod and react hook form

[@jonnawiberg3051]

What is the autocomplete you get when adding packages in your terminal? :) great tutorial

[@hezronbett3980]

It's a default inbuilt in some os I guess, like Kali Linux

[@olaleyeoyewunmi6978]

For the error message for first name it says string must contain at least 2 characters , how can we customize the error message ?

[@speedster784]

How do you add password regex with zod so that you can use that in the schema for validation

[@PappuKumar-rz1tn]

if we click on the submit button without filling the required fields it throws 'required' error message, how to make that to show the custom message instead of the 'required'?

[@explorewithrohan1994]

how do we customise the error messages..?

[@yutsacarm8021]

how to use hostinger with nodemailer

[@wizz1e80]

wouldn't it have been easier to infer the type like [ type FormData = z.infer ]

[@MrJuancho2706]

Hello pedro, first i want to say thanks for all your videos, are really good, now about this video well i have a question.
It is really necessary to get a library for validation like zod? Because i just hardcoded the validation in react with a madeup function that validates first, then if its ok all the values then just put the data on the backend, so my question is this library necessary?
Oh and btw do you know spanish? It would be cool to ask stuff in Spanish bc of my bad english haha!

[@gilbertoaristeubeltramenet5773]

Só conteúdo quente! Dale

[@alveselivelton]

O Pedro é BR? A fala dele soa como um BR falando inglês

[@sowmocoding5740]

anyone having any issue on next13 or next14, use 'use client'

[@KoryGraphic]

Good vid but not great, should've included an example of a select input or radio buttons.

[@husseinmomd]

You could just infer the zod schema and skip creating a form type