How to create a custom hook for form validation in React



Image not found!!

Creating a custom hook for form validation in React is a common practice to encapsulate form validation logic and make it reusable across different components. Here's a simple example of how you can create a custom hook for form validation:

jsx
// useFormValidation.js
import { useState, useEffect } from 'react';

const useFormValidation = (initialState, validate) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setSubmitting] = useState(false);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    setErrors(validate(values));
    setSubmitting(true);
  };

  useEffect(() => {
    if (isSubmitting) {
      const noErrors = Object.keys(errors).length === 0;
      if (noErrors) {
        // Your form submission logic can go here
        console.log('Submitting:', values);
        setSubmitting(false);
      } else {
        setSubmitting(false);
      }
    }
  }, [errors, isSubmitting, values]);

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

export default useFormValidation;

In this example, the useFormValidation hook takes two parameters:

  1. initialState: An object representing the initial values of the form fields.
  2. validate: A function that performs the validation logic and returns an object containing any validation errors.

You can use this hook in your component like this:

jsx
// YourFormComponent.js
import React from 'react';
import useFormValidation from './useFormValidation';

const YourFormComponent = () => {
  const initialState = {
    // initialize your form fields here
    username: '',
    email: '',
    password: '',
  };

  const validate = (values) => {
    // perform your validation logic here
    let errors = {};

    if (!values.username) {
      errors.username = 'Username is required';
    }

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

    if (!values.password) {
      errors.password = 'Password is required';
    } else if (values.password.length < 6) {
      errors.password = 'Password must be at least 6 characters long';
    }

    return errors;
  };

  const { handleChange, handleSubmit, values, errors } = useFormValidation(
    initialState,
    validate
  );

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
        {errors.username && <p>{errors.username}</p>}
      </label>

      <label>
        Email:
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <p>{errors.email}</p>}
      </label>

      <label>
        Password:
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && <p>{errors.password}</p>}
      </label>

      <button type="submit">Submit</button>
    </form>
  );
};

export default YourFormComponent;

In this example, the YourFormComponent uses the useFormValidation hook to manage the form state, handle input changes, and perform validation. The validate function contains the specific validation logic for each form field. The component then renders the form fields, displays validation errors, and handles form submission.

Category List