Creating a Form Validation in React

In this tutorial, we will learn how to implement form validation in a React application. Form validation is the process of ensuring that the data entered into a form meets certain requirements and is valid. It is an essential part of any application that collects user input, as it helps to prevent errors and improve the overall user experience.

What is Form Validation

Form validation is the process of checking the data entered into a form to ensure its accuracy and validity. This can include verifying that required fields are filled, validating email addresses, and ensuring that numeric fields contain only numbers.

Why Form Validation is Important

Form validation is important for several reasons. Firstly, it helps to ensure that the data entered into a form is accurate and valid. This can help to prevent errors and improve the overall user experience. Secondly, form validation can help to prevent malicious attacks, such as SQL injection or cross-site scripting, by validating the data before it is processed. Lastly, form validation can help to provide helpful feedback to the user, guiding them to correct any errors and complete the form successfully.

React and Form Validation

React is a JavaScript library for building user interfaces. It provides a component-based architecture, which makes it easy to create reusable UI components. In the context of form validation, React allows us to easily manage the state of the form and update the UI based on the validation results.

Setting up the Project

Before we start implementing form validation in React, we need to set up a new React project. Follow the steps below to create a new React project and install the necessary dependencies.

Creating a new React project

To create a new React project, open your terminal and run the following command:

npx create-react-app form-validation-react

This command will create a new directory called form-validation-react and set up a new React project inside it.

Installing necessary dependencies

Next, navigate to the project directory by running the following command:

cd form-validation-react

Once inside the project directory, install the following dependencies by running the following command:

npm install react-hook-form

The react-hook-form library provides a simple and flexible way to handle form validation in React.

Building the Form

Now that we have our project set up and the necessary dependencies installed, let's start building the form. We will create a simple form with two input fields: one for the name and one for the email address.

Creating form components

In the src directory, create a new file called Form.js and add the following code:

import React from 'react';

function Form() {
  return (
    <form>
      <div>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

In this code, we define a functional component called Form that renders a form element with two input fields for the name and email address. We also include a button element for submitting the form.

Handling form submission

To handle form submission, we need to add an event handler function to the form element. Modify the Form component as follows:

import React from 'react';

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

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
}

export default Form;

In this code, we define a function called handleSubmit that takes an event parameter. We call event.preventDefault() to prevent the default form submission behavior. Inside the function, you can add your own logic for handling the form submission, such as sending the data to a server or updating the application state.

Implementing Validation

Now that we have our form set up, let's implement the validation logic. There are two approaches we can take: using the built-in HTML5 validation attributes or implementing custom validation logic.

Using built-in HTML5 validation

HTML5 provides a set of built-in validation attributes that can be added to form fields to validate user input. These attributes include required, min, max, pattern, and more.

To add validation to the name input field, modify the corresponding input element as follows:

<input type="text" id="name" name="name" required minLength="2" />

In this code, we add the required attribute to make the field mandatory and the minLength attribute to specify the minimum length of the input.

Custom validation logic

In addition to the built-in HTML5 validation, we can also implement custom validation logic using the react-hook-form library.

First, install the react-hook-form library by running the following command:

npm install react-hook-form

Next, import the necessary functions from the library and modify the Form component as follows:

import React from 'react';
import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          name="name"
          ref={register({ required: true, minLength: 2 })}
        />
        {errors.name && <p>Name is required and must be at least 2 characters long.</p>}
      </div>
      {/* Email field */}
      {/* Submit button */}
    </form>
  );
}

export default Form;

In this code, we import the useForm function from the react-hook-form library and call it to initialize the form. We also destructure the register, handleSubmit, and errors functions from the returned object.

We define an onSubmit function that will be called when the form is submitted. Inside this function, you can add your own logic for handling the form data.

To add validation to the name input field, we pass an object to the ref prop of the input element. This object specifies the validation rules, such as required and minLength.

We also conditionally render an error message using the errors object from react-hook-form. If the name field has an error, we display a message indicating that the field is required and must be at least 2 characters long.

Displaying Validation Errors

To provide a better user experience, we should display the validation errors next to the corresponding form fields. Let's modify the Form component to show the error messages.

Showing error messages

Modify the Form component as follows:

import React from 'react';
import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          name="name"
          ref={register({ required: true, minLength: 2 })}
        />
        {errors.name && (
          <p className="error-message">Name is required and must be at least 2 characters long.</p>
        )}
      </div>
      {/* Email field */}
      {/* Submit button */}
    </form>
  );
}

export default Form;

In this code, we add a className prop to the error message element to apply a CSS class for styling. You can customize the CSS class according to your application's design.

Styling error messages

To style the error messages, you can add CSS rules to your application's stylesheet. Here is an example of how you can style the error message:

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 4px;
}

In this code, we set the color to red, the font size to 12 pixels, and add a small top margin to the error message.

Handling Form State

To provide a better user experience, we can track the state of the form and disable the submit button until the form is valid. Let's modify the Form component to handle the form state.

Tracking form state

Modify the Form component as follows:

import React from 'react';
import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit, errors, formState } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="name">Name</label>
        <input
          type="text"
          id="name"
          name="name"
          ref={register({ required: true, minLength: 2 })}
        />
        {errors.name && (
          <p className="error-message">Name is required and must be at least 2 characters long.</p>
        )}
      </div>
      {/* Email field */}
      {/* Submit button */}
      <button type="submit" disabled={!formState.isValid}>Submit</button>
    </form>
  );
}

export default Form;

In this code, we destructure the formState object from the useForm hook returned value. The formState object contains information about the state of the form, including whether it is valid or not.

We add the disabled prop to the submit button and set it to !formState.isValid. This disables the button when the form is invalid.

Conclusion

In this tutorial, we learned how to implement form validation in a React application. We explored two approaches: using the built-in HTML5 validation attributes and implementing custom validation logic using the react-hook-form library. We also learned how to display validation errors and handle the form state. Form validation is an important part of any application that collects user input, and React provides a convenient way to manage the validation process. By following the steps outlined in this tutorial, you can ensure that the data entered into your forms is accurate and valid, resulting in a better user experience.