React Hook Form Validation example | react-hook-form 7
Tags: react, todayilearned, javascript, webdev
Published: 2021-05-25 09:20:32

In this tutorial, I will show you how to implement React Hook Form Validation and Submit using <a href="https://react-hook-form.com/">react-hook-form 7</a> and Bootstrap 4.

Full Article: [https://bezkoder.com/react-form-validation-hooks/](https://bezkoder.com/react-form-validation-hooks/)

<h2>Overview of React Hook Form Validation example</h2>
We will implement validation for a React Form using <a href="https://react-hook-form.com/">React Hook Form</a> 7. The form has:
<ul>
	<li>Full Name: required</li>
	<li>Username: required, from 6 to 20 characters</li>
	<li>Email: required, email format</li>
	<li>Password: required, from 6 to 40 characters</li>
	<li>Confirm Password: required, same as Password</li>
	<li>Accept Terms Checkbox: required</li>
</ul>

![react-form-validation-hooks-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etipnegi18ovfr5bc2fg.png)

Some fields could be wrong:

![react-form-validation-hooks-example-submit-error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a8pnxz5g2w2ui30amr9.png)

Successful Submission will look like this:

![react-form-validation-hooks-example-submit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2lbp93nylv3v2jfa0lk.png)

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

<h2>Technology</h2>
We're gonna use following modules:
<ul>
	<li>react 17/16</li>
	<li>bootstrap 4</li>
	<li>react-hook-form 7</li>
	<li>yup</li>
	<li>@hookform/resolvers 2.4.0</li>
</ul>

## Further Reading
You can also use the Form Validation in following posts:
- <a href="https://bezkoder.com/react-hooks-crud-axios-api/">React Hooks CRUD example with Axios and Web API</a>
- <a href="https://bezkoder.com/react-hooks-jwt-auth/">React Hooks: JWT Authentication (without Redux) example</a>
- <a href="https://bezkoder.com/react-hooks-redux-login-registration-example/">React Hooks + Redux: JWT Authentication example</a>

More Practice:
- <a href="https://bezkoder.com/react-pagination-hooks/">React Pagination using Hooks example</a>
- <a href="https://bezkoder.com/react-hooks-file-upload/">React Hooks File Upload example with Axios & Progress Bar</a>
- <a href="https://bezkoder.com/react-table-example-hooks-crud/">React Table example: CRUD App | react-table 7</a>

Serverless with Firebase:
- <a href="https://bezkoder.com/react-firebase-hooks-crud/">React Hooks + Firebase Realtime Database: CRUD App</a>
- <a href="https://bezkoder.com/react-hooks-firestore/">React Hooks + Firestore example: CRUD app</a>

Fullstack:
- <a href="https://bezkoder.com/react-spring-boot-crud/">React + Spring Boot + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/spring-boot-react-postgresql/">React + Spring Boot + PostgreSQL: CRUD example</a>
- <a href="https://bezkoder.com/react-spring-boot-mongodb/">React + Spring Boot + MongoDB: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-mysql/">React + Node.js + Express + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-postgresql/">React + Node.js + Express + PostgreSQL example</a>
- <a href="https://bezkoder.com/react-redux-mysql-crud/">React Redux + Node.js + Express + MySQL: CRUD example</a>
- <a href="https://bezkoder.com/react-node-express-mongodb-mern-stack/">React + Node.js + Express + MongoDB example</a>
- <a href="https://bezkoder.com/django-react-hooks/">React + Django + Rest Framework example</a>
- <a href="https://bezkoder.com/react-firebase-hooks-crud/">React Hooks + Firebase Realtime Database: CRUD App</a>
- <a href="https://bezkoder.com/react-hooks-firestore/">React Hooks + Firestore example: CRUD app</a>