DEV Community

loading...
Cover image for React Hook Form Validation example | react-hook-form 7

React Hook Form Validation example | react-hook-form 7

Tien Nguyen
Founder of BezKoder.com
Updated on ・3 min read

In this tutorial, I will show you how to implement React Hook Form Validation and Submit using react-hook-form 7 and Bootstrap 4.

Full Article: https://bezkoder.com/react-form-validation-hooks/

Overview of React Hook Form Validation example

We will implement validation for a React Form using React Hook Form 7. The form has:

  • Full Name: required
  • Username: required, from 6 to 20 characters
  • Email: required, email format
  • Password: required, from 6 to 40 characters
  • Confirm Password: required, same as Password
  • Accept Terms Checkbox: required

react-form-validation-hooks-example

Some fields could be wrong:

react-form-validation-hooks-example-submit-error

Successful Submission will look like this:

react-form-validation-hooks-example-submit

For instruction and source code, please visit:
https://bezkoder.com/react-form-validation-hooks/

Technology

We're gonna use following modules:

  • react 17/16
  • bootstrap 4
  • react-hook-form 7
  • yup
  • @hookform/resolvers 2.4.0

Further Reading

You can also use the Form Validation in following posts:

More Practice:

Serverless with Firebase:

Fullstack:

Discussion (1)

Collapse
jvgm profile image
João Victor Galvão Modesto

Nice, I like to react hook form. To do in next post a show or hidden field utilization checkbox.