React Forms Full Tutorial - Validation, React-Hook-Form, Yup

Подписаться 207 тыс.

Просмотров 95 тыс.

50% 1

Best Tech Resume Template: papermoontech.com/pmcsrtk/pedro
Use code: PEDRO for 20% off ^
Here is the command I used to install all packages: yarn add react-hook-form yup @hookform/resolvers
Code: github.com/machadop1407/form-...
In this video I teach you guys how to build forms in react. I use the libraries YUP and React-Hook-Forms to help me.
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Timestamps
00:00 | What we are building
03:01 | Implementation
Tags:
- React Forms
- Forms in React
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

Наука

Опубликовано:

22 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 165

@gotemperory4278 3 года назад

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}

@PedroTechnologies 3 года назад

Appreciate it! This is the new updated version!

@hmsm5701 3 года назад

thanks a lot

@akhiltheloquacioussoul 3 года назад

Thank you so much :)

@andriitsvirko7296 2 года назад

thanks a lot!!!!!!!!!!!!!!

@TheRonron1994 2 года назад

I'm getting this error instead Error: Function components cannot have string refs. We recommend using useRef() instead.

@duanefaria5804 3 года назад

It is amazing to see this kind of content coming from a Brazilian guy, thank you there

@PedroTechnologies 3 года назад

Hahaha thank you so much! Brazil needs to grow in the programming community!

@guythomas5391 2 года назад

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.

@Mahdi-lz9wu 3 года назад

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.

@mpv756 2 года назад

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.

@anikinae 2 года назад

perfect speach (not too slowly and not too fast) - thank you so much, it's very useful!

@AnthonyCandaele 2 года назад

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.

@ayushdedhia25 3 года назад

Your tutorials are just amazing and easy to grasp the concept ❤️🔥

@PedroTechnologies 3 года назад

Happy to hear that!

@Trzimajewski 2 года назад

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.

@linmus2370 3 года назад

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.

@PedroTechnologies 3 года назад

Hahaha I love this kind of comments! Thank you so much! I really appreciate the support!

@DimmuBorgiry 2 года назад

thanks my friend, it was really a helpful video for me to get into react hook forms. keep up the good work

@andrscrrn 2 года назад

Very clear explanantion! Thanks Pedro!

@fancyAlex1993 3 года назад

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.

@ak2000_ 2 года назад

TypeError: Cannot read properties of undefined (reading 'firstName')

@wilhelm.reeves 2 года назад

Your videos are very easy to follow. Thank you 🥂

@junjietan2668 3 года назад

Keep on going Pedro, your videos helps me a lot. Appreciate your hard work!

@PedroTechnologies 3 года назад

Happy to hear that! This comments motivate me a lot!

@junjietan2668 3 года назад

@@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.

@muradjadoon619 Год назад

@@PedroTechnologies I like your videos

@sinaukode 3 года назад

Thanks, it's really helpful for me who just started to learn react stuff

@anmolgarg7038 Год назад

Amazing tutorial, really well described. Loved it .

@perfectionist2518 Год назад

mate, you got a talent! thank you, it was simple and clear

@dennisbelio6470 3 года назад

Thank you PedroTech for this wonderful resource!

@PedroTechnologies 3 года назад

Glad it was helpful!

@ThColinPereira 3 года назад

This helped me a lot, thanks Pedro!

@hamidrezahassanzadeh246 2 года назад

Hi dear Pedro! Actually I want to thank you for this really really well-described content , you helped me a lot my bro ❤

@Marcus-09 2 года назад

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?

@mohamedabdulqadir2917 3 года назад

Your tutorials really amazing, thank you Pedro

@PedroTechnologies 3 года назад

Glad you like them!

@monikabhardwaj9105 2 года назад

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.

@ujjawalchatterjee 2 года назад

Appreciate it

@sebastiandrozd233 2 года назад

@ayjayaywhy 10 месяцев назад

Appreciate it

@jenslegrou 3 года назад

This is gold. Thank you so much!

@PedroTechnologies 3 года назад

Glad it was helpful!

@Jiji-lo3zs Год назад

I finally understood react-hook-forms. Thankyou 🙂

@marbot9780 2 года назад

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

@bluebill1049 3 года назад

Thank you very much for putting up this video tutorial!

@PedroTechnologies 3 года назад

Glad it was helpful!!

@minsungsuh3872 Год назад

Thank you for this useful video! Is there a way to style the error messages?

@CarlWicker 2 года назад

THanks for this, great tutorial.

@thru_and_thru 2 года назад

Awesome tutorial, thanks so much!

@jamesfreeman1530 2 года назад

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

@skverskk 2 года назад

Well done and easy to understand. Thx

@kasiakordys266 Год назад

great tutorial! Thank you a lot

@kofinartey116 3 года назад

Thanks a lot for this sir. You helped out a brother

@thrivingproject1920 2 года назад

Hey, great vid; what's the extension you use that formats the JS document around 18:13?

@maicolfg 2 года назад

Gracias Pedro, super bueno el tutorial, facil de entender.

@deepalakshmip5520 2 года назад

Very clean ...Superb

@akiij 3 года назад

what extension is that you're using where you get syntax definitions while typing? anyone knows?

@RahulKumar-qu1if Год назад

Can you please tell how i get the min value from the field itself not the hard-coded in the schema

@yashuapervez1533 2 года назад

great tutorial, it really helped

@marimuthur9456 Год назад

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

@MSEIN2303 11 месяцев назад

The best tutorial. thanks a lot

@iqra.manzoor4222 2 года назад

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?

@dedekinc 2 года назад

./src/Components/Form.js Module not found: Can't resolve '@hookform/resolvers/yup' in 'C:\Users\uscr\Desktop\letreact\src\Components'

@anisuzzaman3723 2 года назад

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 ????

@AMoktar 2 года назад

Amazing. Thanks bro

@fionagonza8829 Год назад

Thank you Pedro.

@thiagoleobons390 3 года назад

Maneiro o canal cara. Parabens!

@PedroTechnologies 3 года назад

Obrigado, fico feliz!

@hamdihawari Год назад

Please tell me how do I clean the values after submitting :) something like reset

@safintheship 2 года назад

thank you so much dude

@harshitverma4480 2 года назад

Very clear n concise explanation.

@vinayr6232 2 года назад

Hey Harshit! Glad you liked the video.....would you be interested in exploring opportunities in web development?

@minhthongvo5989 3 года назад

Thank you very much Pedro!!!

@PedroTechnologies 3 года назад

My pleasure!

@hamzamuhammad2967 3 года назад

Love your content keep it up.

@PedroTechnologies 3 года назад

Glad you enjoy it!

@deepakratra77 Год назад

How to do dependent validation. example if first name is predo then only last name is mandatory ?

@antenehyehalem5963 3 года назад

heyy another awesome video from hero keep doing it

@PedroTechnologies 3 года назад

Thank you! Really appreciate the support!

@MrNik0l0z Год назад

from where did ref come from? when i type it the way you do, it gives me an error

@brosethkator7246 2 года назад

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.

@munisazatov7416 2 года назад

'Import cost'

@sreekanthvadassery8288 2 года назад

Superb!!

@moisesdelarosa3843 2 года назад

Hello, does anybody know which color theme is he using?

@thyago8062 3 года назад

Amazing! Could you make a video about masked inputs with React? Thanks!

@johnconnor9787 2 года назад

How can we validate input type="file" with yup

@caikhenrik10 3 года назад

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

@caikhenrik10 3 года назад

No caso upload de arquivos*

@PedroTechnologies 3 года назад

Obrigado! Você quer dizer validar arquivos que sao uploaded?

@caikhenrik10 3 года назад

@@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!

@ruslanpascoal9247 2 года назад

muito bom pedro!

@buihuyhung6490 2 года назад

Great tutorial, can you a tutoral on multi step form with react-hook-form and yup

@mahendranath2504 Год назад

Thank you so much 👍💕👌🙏🤞✌

@CHANNELGIVEWAY 2 года назад

nice amazing thank you

@adennis200 3 года назад

Not gonna watch it right now cause no time but I'm gonna like it in advance

@PedroTechnologies 3 года назад

Hahaha this makes me happy! Really appreciate the support!

@joaopedromonteiroperaro3237 3 года назад

muito bom cara!

@gotemperory4278 3 года назад

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 3 года назад

THank you! The library updated after I made the video so now its outdated!

@husseinkizz 3 года назад

@@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!

@softblood1941 3 года назад

very helpful !

@PedroTechnologies 3 года назад

Glad it was helpful!

@hienqngo 2 года назад

Thanks!

@PedroTechnologies 2 года назад

Thank you for the support!

@amanbansal3928 3 года назад

i got error : Could not install from "@hookform esolvers\yup" as it does not contain a package.json file...please help me!!

@Dan_ny 2 года назад

npm install @hookform/resolvers

@TungPham-hn1lr 3 года назад

I cannot install @hookform/resolvers/yup and I saw that you crashed on it as well. How did you please import this package?

@lyubomirdias5465 2 года назад

just add @ hookform / resolvers ---- than import yupResolver from "@hookform/resolvers/yup"

@Davi-wv8mi 2 года назад

Nice Pedro

@mralex6543 2 года назад

Have you tried required() for Confirm Password?

@brijeshp1878 Год назад

hello from india iam getting error like this = Cannot read properties of undefined (reading 'firstName')

@frontendwithsalimi 10 месяцев назад

use the useForm like this const { register, handleSubmit, formState:{errors} } = useForm({ resolver: yupResolver(userSchema), });

@Ibrahim-ir6ft Год назад

Exellent video

@cryptoboy1461 2 года назад

Great tutorial! It would be more helpful if you used different form types.

@Cmxmxmmx7 2 года назад

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.

@denmccormik7654 2 года назад

syntax has changed a bit, also "?" - that is javascript, check the docs

@anshunarayan8156 9 месяцев назад

Although you are speaking in an american accent but your lectures are too easy to understand😊

@abdelrahmanmahmoud891 2 года назад

thanxxx

@knuckless__ Год назад

excellent

@khanhhq2044 3 года назад

how to get the value to change input, without onSubmit?

@PedroTechnologies 3 года назад

You can create some states and change them on the onChange property!

@aneeqrehman4138 3 года назад

thumbs UP!.... Q# what is the best way to design our components in a project......either we use styled-componnets,scss or css......?

@PedroTechnologies 3 года назад

I like to use styled-components! There is no best way, it is all about preference!

@aneeqrehman4138 3 года назад

@@PedroTechnologies plz share the link where you have design a full dynamic tamplate using style...

@nargizgasanova6222 2 года назад

thanks

@mohamedyoussef8835 2 года назад

Awesome explanation... thank you ++++++++++++++++++++++++++

@robiparvez 3 года назад

nice work

@PedroTechnologies 3 года назад

Thank you! Cheers!

@nishadsandilya6653 3 года назад

I cannot get the errors to work, even after formState:{errors}. what to do?

@gaurav8113 2 года назад

Hi Nishad! hope your doubt got resolved. Are you a self-taught programmer?

@caiofelixreis8970 2 года назад

brazil é cabuloso credo 👏🏾

@Isaz63 2 года назад

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!

@benitomunga4143 Год назад

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')}👍

@lesharper8751 2 года назад

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

@RealEstate3D 3 года назад

Unfortunately we have already react-hok-form v7 out.

@PedroTechnologies 3 года назад

Damn, hope it didn't change a lot!

@tagalogmovierecapspoiler 2 года назад

you save me

@Vlad-us9xt 3 года назад

great

@PedroTechnologies 3 года назад

Glad you liked it!

@DioArsya 2 года назад

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