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
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
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 ?
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'?
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?
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` ?
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.
the auto complete package in your terminal looks really cool
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 🤗
Wow! Never thought Zod is cool.its is better than yup because of its typescript support and ease
Yesss!
You just got a new subscriber bro.
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 ;)
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
Thanks man 😊
It's good to be brief.
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!
how to trigger validation if it is multi step form?
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
Great tutorial, helped me finalize my choice on using Zod for form validation. Thank you.
pedro again, with another great timing
Hey pedro plz next js series
Thank you
You're welcome!
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!!
Thank you for zod tutorial, hope next content is about next, ts and react query mutation.
pedro you are jut the best
Make a full beginner video about zod pedro
The react GOAT ❤️
thank you
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
very good explaination, fully understand❤❤❤❤
We can create type in one line like TFormData=z.infer;
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?)
Thanks!
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.
Awesome and simple explanation!!
thanks for sharing this awesome tutorial🔥🔥🔥
Awesome Video
i don't know general zod create library for web development
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
What is that "gzipped" that apears in front of the "import react from 'react'"?
Nice turtorial,Thanks
helped a lot thanks man
What's the extension that shows packages as you write them in the terminal? This is so cool!
Nice video!!
What is the extension in 4:30 ?
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 ?
Bro, can you make tutorial on shad cn ui?
Nice one
💌
great video
pedro bring upp a best crash course on tRPC .
how to use hostinger with nodemailer
Amazing 🔥🔥
Glad you like it!
❤ always on point thanks bro ❤
Always welcome!
wouldn't it have been easier to infer the type like [ type FormData = z.infer ]
Hi can you start vue training tutorials.I have passed through your react series and love them
Well done!
thank you sir ✌️
the best🙏
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..?
Awesome video! Love the vs code theme...can you share what theme you use? Thanks!
Pedro, how do you feel about doing an overview of the t3 stack?
Yess!
For the error message for first name it says string must contain at least 2 characters , how can we customize the error message ?
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?
How do you add password regex with zod so that you can use that in the schema for validation
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?
nice
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
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'
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!
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