Form Validation In React Hook Form

In this article, we will learn how to use the react hook form to build excellent form In react.

–First, open the react project and install the react hook form  package

npm  Install react-hook-form

–then import this package in app.js file

import { useForm } from "react-hook-form";

–inside the app.js file use the hook

const {
     register,
     handleSubmit,
     formState: { errors },
     reset
 } = useForm();

-register: this  method use for  register input field in react hook form.

-handleSubmit :  this function will receive  the form data if validation is successful.

-errors: set error if you want to display the message.

{errors.FirstName && <p className="error">First name is required.</p>}

–write the below code to mark a field as required

<input type="text"{...register("FirstName", { required: true, maxLength: 20 })} placeholder="Your name.." />

— if you want to add a pattern for validation, you can write something as follows.

<input type="text" {...register("lastName", { required: true, pattern: /^[A-Za-z]+$/i })} placeholder="Your last name.." />

–my app.js file looks like

import React from 'react'
import { useForm } from "react-hook-form";
function App() {
    const {
        register,
        handleSubmit,
        formState: { errors },
        reset
    } = useForm();
    
    const onSubmit = (data) => {
        alert("data submitted")
    };

    return (
        <>
            <div className="container">
                <form onSubmit={handleSubmit(onSubmit)}>
                    <div className="row">
                        <div className="col-25">
                            <label for="fname">First Name</label>
                        </div>
                        <div className="col-75">
                            <input type="text"{...register("FirstName", { required: true, maxLength: 20 })} placeholder="Your First Name.." />
                            {errors.FirstName && <p className="error">First name is required.</p>}
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-25">
                            <label for="lname">Last Name</label>
                        </div>
                        <div className="col-75">
                            <input type="text" {...register("lastName", { required: true, pattern: /^[A-Za-z]+$/i })} placeholder="Your last name.." />
                            {errors.lastName && <p className="error">Last name is required.</p>}
                        </div>
                    </div>
                    <br />
                    <div className="row">
                        <input type="submit" value="Save" className="submit" />
                    </div>
                </form>
            </div>
        </>
    )
}

export default App