A very good tutorial. Because of the new version release there are few changes that we have to do. 1. Error is now a part of formState so use it like below instead of const{register, handleSubmit,errors} const{register,handleSubmit,formState: { errors }} =useForm({ resolver:yupResolver(schema), }); 2. replace ref={register} to {...register("phone_number")} , replace "phone_number" with the name of your field.
what worked for me is: const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema), }); instead of const { register, handleSubmit, errors } = useForm({ resolver: yupResolver(schema), }); and {...register('password')} instead of ref={register}
This is an excellent tutorial, thank you! One small criticism - it's not good practice to rely solely on front end validation, so I would revise the comment in this video "You can safely make a fetch request... and it should be completely safe because you're only submitting the data if it passes through the layer of validation". Someone could easily craft a request via postman or something and submit direct to your server. Always employ server validation.
Great video! I'm just learning react. The course I was taking used redux-form \ redux. I was trying to do the right thing (I think) and make a radio button it's own component so it could be shared in any form. It was a nightmare because of all the state management between components. I never did get it to work. So I was ready to try something new, even if I can't make the radio button it's own component (I'm sure you can). A google search of what are the best libraries for forms got me to react-hook-forms, which led me here. Thank you so much for showing everything from beginning to end. Very helpful and useful.
thank you, buddy, find a good solution after 3 days of struggling with form and validation. just react-hook-from had changed to version 7 and it needs some small change but this tutorial is absolutely brilliant.
You're so badass! I'll go out on limb and say that your channel is gonna have millions of subscribers. I do have a feeling of that. The efforts you're exerting into the videos you're cranking out are gonna pay off. It's a top-tier channel. You're freaking killing it. Love from the US.
Extraordinary explanation thank you so much for your knowledge sharing 😊👌🏼🙏🏼 try to post the video how to bind the form data back to the input fields using yup
Hello Pedro, I am a big fan of your videos here! Thanks for this one - it is amazing! Could you please also show how to split the form here into a multi-form (at least 3 input steps) and everything then still works - including validation!? That you can e.g. only jump on if everything is correct and that you don't lose any values when jumping back! There are already videos about it - but they are all incomplete or incorrect! Thanks in advance! Best regards Markus
@@PedroTechnologies no worry pedro. Meanwhile, i have a barrier after working on the form. it is working fine in the form validation. however comes to form submission, the function was not working even though the password is matched. I noticed if i have remove the resolver from useform, it is working fine as the console will printed out the outcomes however the password and Cpassword have no validation. then, if i implment the resolver onsubmit function does not fire up at all. What's the problem? Many thanks.
Pedro, muito bom vídeo! Mais um inscrito pra ti... Uma sugestão pro próximo vídeo, fazer validação de arquivos com o yup e react hook form... verificar se o arquivo é muito longo, formato, etc... Ajudaria bastante! Top
Hi PedroTech, what extension you use to detect file size when import library? Eg: import React from "react"; this part -> "7. 2K (gzipped: 2.9K) " Thanks.
hi Pedro, amazing video as always. I have a question: how can i validate a disabled input where the value and placeholder is defined by props? Or there is no needed?
Hi Pedro, how can I pass the error response from express/mongoose to yup schema to validate email uniqueness? should I put the the error response to state and from there use the state to validate from yup schema? newbie here and kind of lost. thanks
If i use react hook from need to click submit button two times otherwise not work and if i give any default value in input field without mouse cursor pointer click those input field data not take or pass.could you tell me why ????
Getting Uncaught TypeError: path.split is not a function in react:- react-hook-form updated to 7.0.0 from 6.X.X and has breaking changes: You have to replace all ref={register} with {...register('value_name')}👍
I am having the same issue : Its Giving an error '' TypeError: Cannot read property 'firstName' of undefined '' , so I had to do "{...register('firstName')}" instead of ref={register}. But still says Also not displaying errors, even if I copy paste all of your code. It looks like errors is undefined - "Cannot read property 'firstName' of undefined"
@@PedroTechnologies I have the same issue but gonna look into the documentation if that's the case but don't you consider remaking your tutorials to updates over time? Anyways thanks we love your content!
errors.firstName?.message is this typescript? Why there is a question mark after firstName? Also I tried to add min(8) characters to password field but error is not showing up for some reason.
Hey, I don't think I used a variable called fname in the tutorial! I created a property called firstName, maybe the issue is there! Let me knoow if it fixes!
@@PedroTechnologies i used fname instead of firstName..... and used it same through out the entire code ... it's still not working.... maybe its version mismatch i don't know And when i use ref={register} it gives me bunch of errors so i had to use {... register ('fname')}
![ReactJS Course [11] - React-Hook-Form and YUP Tutorial | How to do Forms The Right Way](http://i.ytimg.com/vi/wlltgs5jmZw/mqdefault.jpg)
![ReactJS Course [11] - React-Hook-Form and YUP Tutorial | How to do Forms The Right Way](/img/tr.png)
A very good tutorial. Because of the new version release there are few changes that we have to do.
1. Error is now a part of formState so use it like below instead of const{register, handleSubmit,errors}
const{register,handleSubmit,formState: { errors }} =useForm({
resolver:yupResolver(schema),
});
2. replace ref={register} to {...register("phone_number")} , replace "phone_number" with the name of your field.
Appreciate it
+1
Appreciate it
what worked for me is:
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema),
});
instead of
const { register, handleSubmit, errors } = useForm({
resolver: yupResolver(schema),
});
and
{...register('password')}
instead of
ref={register}
Appreciate it! This is the new updated version!
thanks a lot
Thank you so much :)
thanks a lot!!!!!!!!!!!!!!
I'm getting this error instead
Error: Function components cannot have string refs. We recommend using useRef() instead.
It is amazing to see this kind of content coming from a Brazilian guy, thank you there
Hahaha thank you so much! Brazil needs to grow in the programming community!
This is an excellent tutorial, thank you! One small criticism - it's not good practice to rely solely on front end validation, so I would revise the comment in this video "You can safely make a fetch request... and it should be completely safe because you're only submitting the data if it passes through the layer of validation". Someone could easily craft a request via postman or something and submit direct to your server. Always employ server validation.
Great video! I'm just learning react. The course I was taking used redux-form \ redux. I was trying to do the right thing (I think) and make a radio button it's own component so it could be shared in any form. It was a nightmare because of all the state management between components. I never did get it to work. So I was ready to try something new, even if I can't make the radio button it's own component (I'm sure you can). A google search of what are the best libraries for forms got me to react-hook-forms, which led me here. Thank you so much for showing everything from beginning to end. Very helpful and useful.
thank you, buddy,
find a good solution after 3 days of struggling with form and validation.
just react-hook-from had changed to version 7 and it needs some small change but this tutorial is absolutely brilliant.
perfect speach (not too slowly and not too fast) - thank you so much, it's very useful!
In v7, it should be like this , replace ref with an obj like this
{errors.firstName?.message}
Thank you for this tutorial. I was getting tired reading the react-hook-form documentation.
TypeError: Cannot read properties of undefined (reading 'firstName')
You're so badass! I'll go out on limb and say that your channel is gonna have millions of subscribers. I do have a feeling of that. The efforts you're exerting into the videos you're cranking out are gonna pay off. It's a top-tier channel. You're freaking killing it. Love from the US.
Hahaha I love this kind of comments! Thank you so much! I really appreciate the support!
I am using the same code with react version 18.1.0.But it is not working, browser is displaying white screen.How can I resolve this issue?
Thanks for this video, the combination of react-hook-form and yup is just what I need for the form validation in my next project.
Your tutorials are just amazing and easy to grasp the concept ❤️🔥
Happy to hear that!
Extraordinary explanation thank you so much for your knowledge sharing 😊👌🏼🙏🏼 try to post the video how to bind the form data back to the input fields using yup
Not gonna watch it right now cause no time but I'm gonna like it in advance
Hahaha this makes me happy! Really appreciate the support!
Mano, ótimo conteúdo, parabéns.
Muito bom saber que existe conteúdo de qualidade assim e que é brasileiro que faz, te desejo muito sucesso.
Hello Pedro,
I am a big fan of your videos here!
Thanks for this one - it is amazing!
Could you please also show how to split the form here into a multi-form (at least 3 input steps) and everything then still works - including validation!?
That you can e.g. only jump on if everything is correct and that you don't lose any values when jumping back!
There are already videos about it - but they are all incomplete or incorrect!
Thanks in advance!
Best regards
Markus
Although you are speaking in an american accent but your lectures are too easy to understand😊
I finally understood react-hook-forms. Thankyou 🙂
mate, you got a talent! thank you, it was simple and clear
thanks my friend, it was really a helpful video for me to get into react hook forms. keep up the good work
Keep on going Pedro, your videos helps me a lot. Appreciate your hard work!
Happy to hear that! This comments motivate me a lot!
@@PedroTechnologies no worry pedro. Meanwhile, i have a barrier after working on the form. it is working fine in the form validation. however comes to form submission, the function was not working even though the password is matched. I noticed if i have remove the resolver from useform, it is working fine as the console will printed out the outcomes however the password and Cpassword have no validation. then, if i implment the resolver onsubmit function does not fire up at all. What's the problem? Many thanks.
@@PedroTechnologies I like your videos
Very clear explanantion! Thanks Pedro!
Thanks, it's really helpful for me who just started to learn react stuff
Thank you PedroTech for this wonderful resource!
Glad it was helpful!
Hi dear Pedro!
Actually I want to thank you for this really really well-described content , you helped me a lot my bro ❤
Pedro, muito bom vídeo! Mais um inscrito pra ti...
Uma sugestão pro próximo vídeo, fazer validação de arquivos com o yup e react hook form... verificar se o arquivo é muito longo, formato, etc... Ajudaria bastante! Top
No caso upload de arquivos*
Obrigado! Você quer dizer validar arquivos que sao uploaded?
@@PedroTechnologies isso! Por exemplo validar se o arquivo é uma imagem, e se a imagem não excede determinada altura e largura por exemplo, seria top!
Thank you very much for putting up this video tutorial!
Glad it was helpful!!
Your videos are very easy to follow.
Thank you 🥂
Your tutorials really amazing, thank you Pedro
Glad you like them!
Very clear n concise explanation.
Hey Harshit!
Glad you liked the video.....would you be interested in exploring opportunities in web development?
Amazing tutorial, really well described. Loved it .
thumbs UP!.... Q# what is the best way to design our components in a project......either we use styled-componnets,scss or css......?
I like to use styled-components! There is no best way, it is all about preference!
@@PedroTechnologies plz share the link where you have design a full dynamic tamplate using style...
Thank you for this useful video! Is there a way to style the error messages?
Maneiro o canal cara. Parabens!
Obrigado, fico feliz!
./src/Components/Form.js
Module not found: Can't resolve '@hookform/resolvers/yup' in 'C:\Users\uscr\Desktop\letreact\src\Components'
This is gold. Thank you so much!
Glad it was helpful!
Hey, great vid; what's the extension you use that formats the JS document around 18:13?
Thanks a lot for this sir. You helped out a brother
Well done and easy to understand. Thx
This helped me a lot, thanks Pedro!
THanks for this, great tutorial.
heyy another awesome video from hero keep doing it
Thank you! Really appreciate the support!
Hi
PedroTech, what extension you use to detect file size when import library? Eg: import React from "react"; this part -> "7. 2K (gzipped: 2.9K)
"
Thanks.
'Import cost'
thank you so much dude
Thank you Pedro.
Great tutorial, can you a tutoral on multi step form with react-hook-form and yup
The best tutorial. thanks a lot
Awesome tutorial, thanks so much!
Gracias Pedro, super bueno el tutorial, facil de entender.
Thank you very much Pedro!!!
My pleasure!
Very clean ...Superb
hi Pedro, amazing video as always. I have a question: how can i validate a disabled input where the value and placeholder is defined by props? Or there is no needed?
great tutorial! Thank you a lot
Amazing! Could you make a video about masked inputs with React? Thanks!
great tutorial, it really helped
Love your content keep it up.
Glad you enjoy it!
Hi Pedro, how can I pass the error response from express/mongoose to yup schema to validate email uniqueness? should I put the the error response to state and from there use the state to validate from yup schema? newbie here and kind of lost. thanks
Can you please tell how i get the min value from the field itself not the hard-coded in the schema
Amazing. Thanks bro
Please tell me how do I clean the values after submitting :) something like reset
Thanks!
Thank you for the support!
Great tutorial! It would be more helpful if you used different form types.
i got error : Could not install from "@hookform
esolvers\yup" as it does not contain a package.json file...please help me!!
npm install @hookform/resolvers
If i use react hook from need to click submit button two times otherwise not work and if i give any default value in input field without mouse cursor pointer click those input field data not take or pass.could you tell me why ????
How to do dependent validation. example if first name is predo then only last name is mandatory ?
Superb!!
Getting Uncaught TypeError: path.split is not a function in react:-
react-hook-form updated to 7.0.0 from 6.X.X and has breaking changes:
You have to replace all ref={register} with {...register('value_name')}👍
I am having the same issue : Its Giving an error '' TypeError: Cannot read property 'firstName' of undefined '' , so I had to do "{...register('firstName')}" instead of ref={register}. But still says
Also not displaying errors, even if I copy paste all of your code. It looks like errors is undefined - "Cannot read property 'firstName' of undefined"
THank you! The library updated after I made the video so now its outdated!
@@PedroTechnologies I have the same issue but gonna look into the documentation if that's the case but don't you consider remaking your tutorials to updates over time? Anyways thanks we love your content!
brazil é cabuloso credo 👏🏾
Thank you so much 👍💕👌🙏🤞✌
Hey Pedro, excellent series of videos on React. Thanks. Su nombre y apellidos son latinos pero su acento no, cuales su ascendencia? Gracias de nuevo!
what extension is that you're using where you get syntax definitions while typing? anyone knows?
Exellent video
very helpful !
Glad it was helpful!
muito bom pedro!
Easier to use react hook form and typescript then create an interface and attach it as generic to the useForm hook. And also Yup is very large in size
from where did ref come from? when i type it the way you do, it gives me an error
Have you tried required() for Confirm Password?
nice amazing thank you
Nice Pedro
you save me
Hello, does anybody know which color theme is he using?
I don't understand. Why use yup if react-hook-form has built-in validation that works fine and you don't need extra libraries loading the bundle
thanks
Nice,
Bro where r u from buddy
Thank you! I am from Brazil!
muito bom cara!
hello from india iam getting error like this = Cannot read properties of undefined (reading 'firstName')
use the useForm like this
const { register, handleSubmit, formState:{errors} } = useForm({
resolver: yupResolver(userSchema),
});
excellent
thanxxx
How can we validate input type="file" with yup
I cannot install @hookform/resolvers/yup and I saw that you crashed on it as well. How did you please import this package?
just add @ hookform / resolvers ---- than import yupResolver from "@hookform/resolvers/yup"
nice work
Thank you! Cheers!
Awesome explanation... thank you ++++++++++++++++++++++++++
errors.firstName?.message is this typescript? Why there is a question mark after firstName? Also I tried to add min(8) characters to password field but error is not showing up for some reason.
syntax has changed a bit, also "?" - that is javascript, check the docs
how to get the value to change input, without onSubmit?
You can create some states and change them on the onChange property!
Unfortunately we have already react-hok-form v7 out.
Damn, hope it didn't change a lot!
great
Glad you liked it!
I got no output, following all the steps you showed
I cannot get the errors to work, even after formState:{errors}. what to do?
Hi Nishad! hope your doubt got resolved. Are you a self-taught programmer?
Its Giving an error '' TypeError: Cannot read property 'fname' of undefined ''
I have used fname everywhere. Checked it Twice
Please Help !!!
Hey, I don't think I used a variable called fname in the tutorial! I created a property called firstName, maybe the issue is there! Let me knoow if it fixes!
@@PedroTechnologies i used fname instead of firstName..... and used it same through out the entire code ... it's still not working.... maybe its version mismatch i don't know
And when i use ref={register} it gives me bunch of errors so i had to use {... register ('fname')}