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.
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.
@@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` ?
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 🤗
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.
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
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
Excelente Conteúdo!! Gostei muito do vídeo. Não tem nada a ver com o conteúdo, mas devo elogiar seu inglês!! Só fui perceber que você era brasileiro quando vi o autocomplete colocar seu nome sksksksks Ótimo vídeo e ótima comunicação!
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 ?
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?
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
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'?
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!
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` ?
every time Im looking for something and I find a useful video that actually helps, I look up at the channel name and... it's you! Great!
Thanksss hahaha happy to hear!
Hey Pedro i want more Typescript stuff in future I love TS.
More to come!
That was great😍
Thanks for this full zodi and react hook form tutorial
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 ;)
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 🤗
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.
pedro again, with another great timing
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!
Great tutorial, helped me finalize my choice on using Zod for form validation. Thank you.
You just got a new subscriber bro.
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
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!
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
Thanks man 😊
The react GOAT ❤️
What is the extension in 4:30 ?
It was really a very good video, I hope you continue making many more, thank you very much teacher Pedro...
This video is so helpful. Bro could you please do a video on tRPC?
Thank you for zod tutorial, hope next content is about next, ts and react query mutation.
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!!
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?)
Excellent video! Right to the point.
how to trigger validation if it is multi step form?
What's the extension that shows packages as you write them in the terminal? This is so cool!
Excelente Conteúdo!! Gostei muito do vídeo.
Não tem nada a ver com o conteúdo, mas devo elogiar seu inglês!! Só fui perceber que você era brasileiro quando vi o autocomplete colocar seu nome sksksksks Ótimo vídeo e ótima comunicação!
Kkkkkkkk vlww
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❤❤❤❤
thanks for sharing this awesome tutorial🔥🔥🔥
We can create type in one line like TFormData=z.infer;
What is that "gzipped" that apears in front of the "import react from 'react'"?
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, how do you feel about doing an overview of the t3 stack?
Yess!
helped a lot thanks man
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
pedro you are jut the best
Awesome video! Love the vs code theme...can you share what theme you use? Thanks!
Nice turtorial,Thanks
i don't know general zod create library for web development
❤ always on point thanks bro ❤
Always welcome!
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
Amazing 🔥🔥
Glad you like it!
Well done!
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'?
how do we customise the error messages..?
Make a full beginner video about zod pedro
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
Hi can you start vue training tutorials.I have passed through your react series and love them
How do you add password regex with zod so that you can use that in the schema for validation
For the error message for first name it says string must contain at least 2 characters , how can we customize the error message ?
Nice video!!
Awesome Video
thank you sir ✌️
Thank you So Much!!
Nice one
💌
wouldn't it have been easier to infer the type like [ type FormData = z.infer ]
Bro, can you make tutorial on shad cn ui?
It's good to be brief.
Hey pedro plz next js series
how to use hostinger with nodemailer
Thank you
You're welcome!
Thanks!
great video
the best🙏
pedro bring upp a best crash course on tRPC .
Sir Plz Start React Native Tutorials as well as with Real time industry Projects plz sir
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!
anyone having any issue on next13 or next14, use 'use client'
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
nice
Só conteúdo quente! Dale
O Pedro é BR? A fala dele soa como um BR falando inglês
thank you