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.
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.
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.
@@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.
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
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.
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')}👍
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?
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 ????
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!
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
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.
![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.
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!
Your tutorials are just amazing and easy to grasp the concept ❤️🔥
Happy to hear that!
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.
perfect speach (not too slowly and not too fast) - thank you so much, it's very 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.
Very clear explanantion! Thanks Pedro!
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.
mate, you got a talent! thank you, it was simple and clear
Thank you very much for putting up this video tutorial!
Glad it was helpful!!
Thank you PedroTech for this wonderful resource!
Glad it was helpful!
Very clear n concise explanation.
Hey Harshit!
Glad you liked the video.....would you be interested in exploring opportunities in web development?
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
This is gold. Thank you so much!
Glad it was helpful!
Your tutorials really amazing, thank you Pedro
Glad you like them!
thanks my friend, it was really a helpful video for me to get into react hook forms. keep up the good work
Maneiro o canal cara. Parabens!
Obrigado, fico feliz!
I finally understood react-hook-forms. Thankyou 🙂
thank you so much dude
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.
THanks for this, great tutorial.
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?
Your videos are very easy to follow.
Thank you 🥂
Amazing tutorial, really well described. Loved it .
Very clean ...Superb
heyy another awesome video from hero keep doing it
Thank you! Really appreciate the support!
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
Thanks, it's really helpful for me who just started to learn react stuff
Well done and easy to understand. Thx
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
This helped me a lot, thanks Pedro!
great tutorial! Thank you a lot
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!
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!
The best tutorial. thanks a lot
Thank you Pedro.
Thank you very much Pedro!!!
My pleasure!
Thanks a lot for this sir. You helped out a brother
Love your content keep it up.
Glad you enjoy it!
Awesome tutorial, thanks so much!
Although you are speaking in an american accent but your lectures are too easy to understand😊
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...
great tutorial, it really helped
Amazing. Thanks bro
Thanks!
Thank you for the support!
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
Hi dear Pedro!
Actually I want to thank you for this really really well-described content , you helped me a lot my bro ❤
Gracias Pedro, super bueno el tutorial, facil de entender.
./src/Components/Form.js
Module not found: Can't resolve '@hookform/resolvers/yup' in 'C:\Users\uscr\Desktop\letreact\src\Components'
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'
Superb!!
nice amazing thank you
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')}👍
Hey, great vid; what's the extension you use that formats the JS document around 18:13?
Thank you for this useful video! Is there a way to style the error messages?
very helpful !
Glad it was helpful!
Thank you so much 👍💕👌🙏🤞✌
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?
muito bom pedro!
Can you please tell how i get the min value from the field itself not the hard-coded in the schema
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
How to do dependent validation. example if first name is predo then only last name is mandatory ?
Please tell me how do I clean the values after submitting :) something like reset
Great tutorial, can you a tutoral on multi step form with react-hook-form and yup
Nice Pedro
from where did ref come from? when i type it the way you do, it gives me an error
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 ????
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!
Amazing! Could you make a video about masked inputs with React? Thanks!
Awesome explanation... thank you ++++++++++++++++++++++++++
brazil é cabuloso credo 👏🏾
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
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),
});
Exellent video
Hello, does anybody know which color theme is he using?
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
what extension is that you're using where you get syntax definitions while typing? anyone knows?
thanks
excellent
Have you tried required() for Confirm Password?
thanxxx
Great tutorial! It would be more helpful if you used different form types.
nice work
Thank you! Cheers!
How can we validate input type="file" with yup
how to get the value to change input, without onSubmit?
You can create some states and change them on the onChange property!
Nice,
Bro where r u from buddy
Thank you! I am from Brazil!
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!
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
Unfortunately we have already react-hok-form v7 out.
Damn, hope it didn't change a lot!
I got no output, following all the steps you showed
great
Glad you liked it!
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"
you save me
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?
Getting this error anyone please help me
Unexpected token:
{errors.email?.message}
^