Form Validations Using React-Hook-Form Library

Description

In ReactJS, creating a form can be a nightmare, but using third-party libraries like react-hook-form it can be done smoothly and pretty manageable way. The library provides all the features that a modern form needs. It is simple, fast, and offers isolated re-renders for elements. In this guide, we will learn about the real-time use of React functional components and hooks having an extensive example of a user registration form with the various types of validators and validation rules.

Lab Objective

Upon completion of this lab, you will be able to:

•  How to create and work with React functional components and hooks
•  How to use hooks and work with the form while having the various types of forms validation

Features of React Hook Forms

•  Open source
•  Supports Typescript
•  Supports for react-native
•  Provides DevTool for inspecting form data
•  Provides Form Builder to create the forms by drag and drop

Advantages of using React Hook Form:

•  Easy to learn and build
•  Provides form validation
•  Easy to handle the form submission.
•  We can watch any particular form field.
•  We can integrate with any UI library.
•  Provides schema validation.

Prerequisites

You should have a basic understanding of react functional components, bootstrap, and knowledge of React Hooks.

Lab Requirements

Create a User Registration form with the following fields and validations. 

•  Name: Required
•  Username: Required, Min Length (3)
•  Email: Required, Email
•  Password: Required with (1 Uppercase, 1 Number, 1 Special Char, and 1 Lowercase Char), Min Length (8chars)
•  Confirm Password: Required, Compare
•  Contact: Regular Expression
•  Gender: Required (Radio Button)
•  Accept Terms: Required (Check Box)

Note: Use Simple Bootstrap5, React Hook Form, and Yup Libraries