DEV Community

Cover image for React form validation with React Hook Form and Yup

React form validation with React Hook Form and Yup

Francisco Mendes on June 30, 2021

Validating user input on forms prior to submission, in my opinion, is one of the most important and fundamental things about a website these days. ...
Collapse
 
ivarskublins profile image
Ivars Kubliņš

Hi! Where did you got that look of form? Some css, which didn't show or it is some inbuilt in hook Forms? How I can use my look then?

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

I used water.css

Collapse
 
roshan_ican profile image
〽️ 𝙍𝙤𝙨𝙝𝙖𝙣

what is that

Collapse
 
canra profile image
Soni Canra Wiguna

it work, thank you so much

Collapse
 
anesunapsta profile image
Anesu Napsta

very usefull, i love yup and this comination with useForms is amazing. Thank you. Do you have another one for Redux/Toolkit

Collapse
 
thaoktk profile image
Tran Thu Thao

so usefull thank u very much!!!

Collapse
 
sorayami profile image
Soraya

Amazing! Thank you for sharing.

Collapse
 
meetmakwana7396 profile image
Meet Makwana

hii, i am using react-hook-form with Typescript

    const schema = yup.object().shape({
        email: yup.string().email().required(),
        password: yup.string().min(8).max(32).required(),
    });

    const { register, handleSubmit, formState } = useForm<IAuthLogin>({
        defaultValues: {
            email: '', // Set initial value for email field
            password: '', // Set initial value for password field
        },
        resolver: yupResolver(schema),
    });
Enter fullscreen mode Exit fullscreen mode

the problem is with typescript it is asking me to add Type for resolver

Image description

Collapse
 
gnganapath profile image
gnganapath

Great explanation. My first search got successfully at dev.to

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks for the feedback! I am very happy to hear that the article helped you!

Collapse
 
naskovic profile image
naskovic

Thank you for this tutorial, greate job ;)

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thank you very much for the feedback! 🤗

Collapse
 
fadhilradh profile image
Fadhil Radhian • Edited

Amazing explanation! Thank you so much, you helped me understand this quickly

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thank you very much for the feedback! 💪

Collapse
 
hipstersantos profile image
HipsterSantos

That was really useful , I got it in less than a minute .greate job

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Glad to know and thanks so much for your feedback! 👊

Collapse
 
noor_codes profile image
Noorullah Ahmadzai

Thank You for sharing @franciscomendes10866
I learnt something new today :)

Collapse
 
franciscomendes10866 profile image
Francisco Mendes

Thanks! I am grateful for your message! ☺️

Collapse
 
moinulmoin profile image
Moinul Moin

any example of using Joi?

Collapse
 
cathat profile image
Nikita E

hi! how check global errors in react-hook form?

Collapse
 
wilmela profile image
Wilmela

Thanks, this was helpful.

Collapse
 
krishnacyber profile image
krishna-Tiwari

and what if we want to show our custom error message can you elaborate clearly for this

Collapse
 
hanuz06 profile image
Andrey Li • Edited

I think react-hook-form have validation features already. Yup is probably not necessary.

Collapse
 
vladyslavvagin profile image
Vladyslav Vagin

Thanks, very usefull ! :)