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

Form validation is a crucial aspect of building robust and user-friendly web applications. With ReactJS, we can create reusable custom hooks to handle input validation and error handling efficiently. In this article, we will explore the process of building a custom hook that simplifies form validation and enhances code reusability.

Understanding Form Validation

Form validation involves validating user input to ensure it meets specific criteria or constraints. This validation can include checking for required fields and validating email addresses, passwords, or other particular data formats. Proper form validation helps prevent invalid or malicious data from being submitted and provides a better user experience by giving users clear feedback on their input.

Getting Started

To begin, let’s set up a basic ReactJS project using Create React App. Open your terminal and run the following command:

npx create-react-app form-validation-demo

Once the project is created, navigate to the project directory:

npx create-react-app form-validation-demo

Now, let’s create a new file called useFormValidation.js in the src directory. This is where we will define our custom hook.

Building the Custom Hook

In the useFormValidation.js file, we'll start by importing the necessary dependencies and defining our custom.

import { useState } from 'react';

const useFormValidation = () => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    setValues((prevValues) => ({
      ...prevValues,
      [event.target.name]: event.target.value,
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Perform form submission logic here
  };

  return { values, errors, handleChange, handleSubmit };
};

export default useFormValidation;

In the code above, we import the useState hook from React and define our useFormValidation hook. The hook initializes two state variables: values and errors. The values state variable holds the current values of the form inputs, while the errors state variable keeps track of any validation errors.

We also define two helper functions within the hook: handleChange and handleSubmit. The handleChange the function is called whenever a form input changes, updating the values state accordingly. The handleSubmit function is responsible for handling the form submission logic.

Implementing Validation Logic

Now that we have our basic custom hook structure, let’s add the validation logic. We’ll modify the useFormValidation hook to include validation rules for each input field and update the errors state accordingly.

import { useState } from 'react';

const useFormValidation = () => {
  // ... existing code ...

  const validate = (values) => {
    let errors = {};

    // Perform validation checks for each field
    if (!values.name) {
      errors.name = 'Name is required';
    }

    if (!values.email) {
      errors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      errors.email = 'Email is invalid';
    }

    // Add more validation rules as needed

    return errors;
  };

  const handleChange = (event) => {
    setValues((prevValues) => ({
      ...prevValues,
      [event.target.name]: event.target.value,
    }));

    setErrors(validate(values));
  };

  // ... remaining code ...
};