Updated on January 27, 2023

Form Validation in ReactJS: Build a Reusable Custom Hook for Inputs and Error Handling

10 min read
published in #react-js
cover image for a blog on Form Validation in ReactJS: Build a Reusable Custom Hook for Inputs and Error Handling

Hi there👋,

Form📝 handling is an essential part of any website. Since Forms takes the important information from the user. We must create robust form component which can handle inputs and it’s validation🚦 easily. Here, we’re going to create a simple React Hook⚓ to handle form as well as it’s validation.

The advantage of this hook is,

  • It is Reusable, so that you can use it anywhere in your website or for other projects.
  • You can handle validation easily, You just have to put conditions for input fields you want to validate.
  • This hook makes error handling very easy, also you can customize error messages as well.
  • Very easy to implement and build

If you prefer to watch video then here is the video tutorial👇

Creating a Basic React App

First of all makes sure you have created a react app using the following command👇

npx create-react-app react-form-component
cd react-form-component

Now start your react app using👇

npm start

Let’s remove the unnecessary code from the App.js file and create form with 3 inputs and 1 submit button as given in the following code block.

import './App.css';

function App() {
  return (

    <div className="app">
      <input type="email" name="email" placeholder="E-mail"   />
      <input type="password" name="password" placeholder="password"  />
      <input type="text" name="username" placeholder="username"  />
      <input type="submit" value="Submit" className="submit"  />


export default App;

Let’s add some css in the App.css file.

.app {
  text-align: center;
  margin-top: 20vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin: 0.5rem 0;
  padding: 1rem;
  outline: none;

  border: 2px solid #000 !important;
  cursor: pointer;

Creating The Basic Structure of The Custom Hook

Create Hooks folder in the src folder. In this folder create one file called useForm.js .

To create any custom hook, you can keep different file name but name of the hook should always start from use keyword.

Let’s Write basic snippet in this file as given in the following code block,

const useForm = () => {



export default useForm

Implementing State In Custom Hook

In this hook we need two states,

  1. values: A state to store form values, initially an empty object.
  2. errors: A state to store errors if any, initially an empty object.

let’s create these states,

//Form values
const [values, setValues] = useState({});
const [errors, setErrors] = useState({});

Creating a Method to Handle Form Values

Let’s create a method to handle form values and set values state.

//A method to handle form inputs
const handleChange = (event) => {

    //To stop default events

    let name = event.target.name;
    let val = event.target.value;

    //Let's set these values in state

        ...values,   //spread operator to store old values


This method takes event as an argument and then it will set the values state as [key]:value pair in values object. Now to use this methods and state in other components we need to return it.

Your useForm should look as the following,

import React, { useState } from 'react'

const useForm = () => {

    //Form values
    const [values, setValues] = useState({});
    const [errors, setErrors] = useState({});

  //A method to handle form inputs
    const handleChange = (event) => {
        //To stop default events
        let name = event.target.name;
        let val = event.target.value;
        //Let's set these values in state

    return {
export default useForm;

Let’s call and use this hook in the App.js file. Open your App file and paste below code.

Let’s import useForm hook,

import useForm from "./Hooks/useForm";

Let’s deconstruct states and method from hook.

//Custom hook call
const { handleChange, values, errors } = useForm();

Make sure to attach handleChange method with onChange event of each inputs like the following👇

<input type="email" name="email" placeholder="E-mail"  onChange={handleChange}   />
<input type="password" name="password" placeholder="password" onChange={handleChange}   />
<input type="text" name="username" placeholder="username"  onChange={handleChange}  />

You can check values state by using console.log(values) inside the App.js file.

Implementing Form Validation in Custom Hook

Let’s create a validation function in useForm hook. Open useForm.js file, and write following code,

const validate = (event, name, value) => {

    //A function to validate each input values
    switch (name) {
        case 'username':
            if (value.length <= 4) {
                // we will set the error state
                    username: 'Username atleast have 5 letters'
            } else {

// set the error state empty or remove the error for username input,
// omit function removes/omits the value from given object and returns a new object

                let newObj = omit(errors, "username");



Let’s break down validate function. This function takes 3 arguments,

  • event: If you want target element for customization or styling.
  • name: name of the element.
  • values: values of the element.

Here we have used switch statement for different elements, so that you can validate different elements. The key of the switch is the name of the element.

Now for the first case we have username, So, in this case we have a condition that, if length of the username value is <= 4 then we will set the error state else we will remove that error if exists.

Here we have used omit function, since we can not manipulate state object directly. This omit function takes two arguments first is the object and second is the name of the error you want to remove, Now omit function remove that error if it exist then it returns the new object.

Now in the handleChange method use validate function and make sure to pass all the arguments. Refer the following code👇

1import React, { useState } from 'react'
2import {omit} from 'lodash'
4const useForm = () => {
5    //Form values
6    const [values, setValues] = useState({});
7    //Errors
8    const [errors, setErrors] = useState({});
10    const validate = (event, name, value) => {
11        //A function to validate each input values
12        switch (name) {
13            case 'username':
14                if(value.length <= 4){
15                    // we will set the error state
17                    setErrors({
18                        ...errors,
19                        username:'Username atleast have 5 letters'
20                    })
21                }else{
22                    // set the error state empty or remove the error for username input
23                    //omit function removes/omits the value from given object and returns a new object
24                    let newObj = omit(errors, "username");
25                    setErrors(newObj);
26                }
27                break;
29            case 'email':
30                if(
31                    !new RegExp( /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)
32                ){
33                    setErrors({
34                        ...errors,
35                        email:'Enter a valid email address'
36                    })
37                }else{
38                    let newObj = omit(errors, "email");
39                    setErrors(newObj);
40                }
41            break;
43            case 'password':
44                if(
45                    !new RegExp(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$/).test(value)
46                ){
47                    setErrors({
48                        ...errors,
49                        password:'Password should contains atleast 8 charaters and containing uppercase,lowercase and numbers'
50                    })
51                }else{
52                    let newObj = omit(errors, "password");
53                    setErrors(newObj);
54                }
55            break;
57            default:
58                break;
59        }
60    }
62  //A method to handle form inputs
63    const handleChange = (event) => {
64        //To stop default events
65        event.persist();
67        let name = event.target.name;
68        let val = event.target.value;
70        validate(event,name,val);
72        //Let's set these values in state
73        setValues({
74            ...values,
75            [name]:val,
76        })
78    }
79    return {
80        values,
81        errors,
82        handleChange,
83    }
86export default useForm

Line no:31 Here, for email we are using regular expression to validate the email value. If is is false then if condition becomes true and we will set the error accordingly. Same for the password. You can customize this regular function as per your requirements.

Line no:79 In this line we are calling validate function which will validate all the inputs.

Handling The Submit Event

Let’s create handle submit function. open App.js file and write the following code.

//Final submit function
const formLogin = () => {
 console.log("Callback function when form is submitted!");
 console.log("Form Values ", values);

Now this is the function you can customize and will be called when the form is submitted. Let’s pass this function in the useForm hook as a callback function.

//Custom hook call
const { handleChange, values, errors, handleSubmit } = useFor(formLogin);

This is how you can pass your custom functions to the hooks. Now let’s open the useForm.js file and deconstruct callback function from the props as the following code block👇

const useForm = (callback) => {

Let’s create handleSubmit function.

const handleSubmit = (event) => {

    if(event) event.preventDefault();

    if(Object.keys(errors).length === 0 && Object.keys(values).length !==0 ){
        alert("There is an Error!");


In this function, if length of errors is 0 and length of values is not zero (values are not empty) then it will call the callback function else it will alert the user.

You should customize these conditions as per your requirements.

Don’t forget to add handleSubmit function in the return statement. Now let’s open the App.js file and deconstruct handleSubmit method from the useForm hook as the following,

const { handleChange, values, errors, handleSubmit } = useFor(formLogin);

Let’s connect this method with the form with the onSubmit event. <form onSubmit={handleSubmit}>

Displaying the errors

Now to display errors we can do something like this,

<form onSubmit={handleSubmit}>

      <input type="email" name="email" placeholder="E-mail"  onChange={handleChange}   />
        errors.email && <h3>{errors.email}</h3>
      <input minLength='8' type="password" name="password" placeholder="password"  onChange={handleChange}   />
        errors.password && <h3>{errors.password}</h3>

      <input type="text" minLength='5' required name="username" placeholder="username"  onChange={handleChange}   />
        errors.username && <h3>{errors.username}</h3>

      <input type="submit" value="Submit" className="submit"  />

First we will check if there is any error then we will display it. You can watch the above video for manipulating the style of the component based on it’s values.

The End

In this blog post, We have learned how to handle form inputs and form validations in React.js by building a reusable custom hook. We have understood how custom hook can simplify the process of form validation. By creating a custom hook, we can easily improved the performance of forms, make the development process more efficient, and write clean and maintainable code.
Like this article? Share this on👇