React Hook Form with ZOD Tutorial - React and Typescript Form Validation Tutorial
Vložit
- čas přidán 29. 07. 2024
- 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: pedro@pedrotech.co
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 - Věda a technologie
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.
how to use hostinger with nodemailer
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.
I was also about to suggest the TypeScript infer to transform the Schema to a type instead of redoing it.😜
How do you do this? if I try it "schema" is in the App scope so it doesn't detect it
@@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.
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` ?
Hey Pedro i want more Typescript stuff in future I love TS.
More to come!
Jod!! this should be the way of teaching man. we are here because it is complex to understand, and they are making it even complex.
Great tutorial, helped me finalize my choice on using Zod for form validation. Thank you.
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 🤗
Thanks man 😊
It was really a very good video, I hope you continue making many more, thank you very much teacher Pedro...
Excellent video! Right to the point.
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.
really a useful tutorial which is way better for understanding the validations..keep going
Awesome and simple explanation!!
the auto complete package in your terminal looks really cool
Again a very good tutorial Pedro ❤
Your tailwind course is awesome man I learnt a lot thanks for sharing free knowledge.
@@prashlovessamosa hey bigsamosa thank you my friend that is so nice ! Hope you enjoyed ;)
helped a lot thanks man
Thank you for zod tutorial, hope next content is about next, ts and react query mutation.
It's good to be brief.
thank you sir ✌️
You just got a new subscriber bro.
pedro again, with another great timing
thank you
thanks for sharing this awesome tutorial🔥🔥🔥
Thanks!
Nice turtorial,Thanks
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 ?
very good explaination, fully understand❤❤❤❤
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?
Wow! Never thought Zod is cool.its is better than yup because of its typescript support and ease
Yesss!
Thank you
You're welcome!
Awesome Video
how to trigger validation if it is multi step form?
Well done!
What's the extension that shows packages as you write them in the terminal? This is so cool!
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?
pedro you are jut the best
What is that "gzipped" that apears in front of the "import react from 'react'"?
For the error message for first name it says string must contain at least 2 characters , how can we customize the error message ?
Hello, I have bought the subscription on brilliant Just keep doing what you do you have helped me alot❤
Great to hear :) Thank you for the support!
Nice video!!
How do you add password regex with zod so that you can use that in the schema for validation
how do we customise the error messages..?
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'?
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?)
great video
What is the extension in 4:30 ?
Awesome video! Love the vs code theme...can you share what theme you use? Thanks!
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
Nice one
💌
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
The react GOAT ❤️
the best🙏
Amazing 🔥🔥
Glad you like it!
❤ always on point thanks bro ❤
Always welcome!
i don't know general zod create library for web development
how to use hostinger with nodemailer
Bro, can you make tutorial on shad cn ui?
Hi can you start vue training tutorials.I have passed through your react series and love them
We can create type in one line like TFormData=z.infer;
nice
Pedro, how do you feel about doing an overview of the t3 stack?
Yess!
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
What is the autocomplete you get when adding packages in your terminal? :) great tutorial
It's a default inbuilt in some os I guess, like Kali Linux
Make a full beginner video about zod pedro
Hey pedro plz next js series
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
For sure!!
wouldn't it have been easier to infer the type like [ type FormData = z.infer ]
pedro bring upp a best crash course on tRPC .
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!
Sir Plz Start React Native Tutorials as well as with Real time industry Projects plz sir
anyone having any issue on next13 or next14, use 'use client'
Só conteúdo quente! Dale
O Pedro é BR? A fala dele soa como um BR falando inglês
Good vid but not great, should've included an example of a select input or radio buttons.
You could just infer the zod schema and skip creating a form type