5 Ways To Validate Forms With React Hook Form And Yup

Quick Links :

As a developer, you're likely no stranger to the importance of form validation in ensuring the accuracy and integrity of user input data. With the rise of React and its ecosystem, managing forms and validation has become a breeze, thanks to libraries like React Hook Form and Yup. In this article, we'll delve into the world of form validation and explore five ways to validate forms using React Hook Form and Yup.

Why Form Validation Matters

Form validation is a critical aspect of any web application, as it helps prevent errors, ensures data consistency, and improves the overall user experience. By validating user input data, you can catch errors early on, provide instant feedback, and reduce the likelihood of data corruption or security breaches.

Introducing React Hook Form and Yup

React Hook Form is a popular library for managing forms in React applications. It provides a simple and intuitive API for handling form state, validation, and submission. Yup, on the other hand, is a JavaScript schema builder for value parsing and validation. Together, React Hook Form and Yup form a powerful combination for robust form validation.

1. Basic Form Validation with React Hook Form

To get started with form validation using React Hook Form, you'll need to install the library and import it in your React component. Here's a basic example of a form with validation:

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

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

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

  return (
    

      
      {errors.username && 
This field is required
}
      
    
  );
}

In this example, we're using the useForm hook to manage the form state and validation. The register function is used to register the form fields, while the handleSubmit function handles the form submission.

2. Advanced Form Validation with Yup

Yup takes form validation to the next level by providing a robust schema builder for defining validation rules. Here's an example of how to use Yup with React Hook Form:

import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required(),
  email: yup.string().email().required(),
});

function MyForm() {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: schema,
  });

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

  return (
    

      
      {errors.username && 
This field is required
}
      
      {errors.email && 
Please enter a valid email
}
      
    
  );
}

In this example, we're defining a Yup schema for the form fields using the object and shape methods. We're then passing this schema to the useForm hook to enable validation.

3. Conditional Validation with React Hook Form and Yup

Sometimes, you may need to validate form fields conditionally based on user input. React Hook Form and Yup make it easy to achieve this. Here's an example:

import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required(),
  email: yup.string().email().when('username', {
    is: (username) => username.includes('@'),
    then: yup.string().required(),
    otherwise: yup.string().notRequired(),
  }),
});

function MyForm() {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: schema,
  });

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

  return (
    

      
      {errors.username && 
This field is required
}
      
      {errors.email && 
Please enter a valid email
}
      
    
  );
}

In this example, we're using the when method to conditionally validate the email field based on the value of the username field.

4. Custom Validation with React Hook Form and Yup

While React Hook Form and Yup provide a wide range of built-in validation rules, you may sometimes need to create custom validation logic. Here's an example of how to do this:

import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required(),
  password: yup.string().test('password-validation', 'Password must contain at least 8 characters, 1 uppercase letter, 1 lowercase letter, and 1 special character', (value) => {
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    return passwordRegex.test(value);
  }),
});

function MyForm() {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: schema,
  });

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

  return (
    

      
      {errors.username && 
This field is required
}
      
      {errors.password && 
Password must contain at least 8 characters, 1 uppercase letter, 1 lowercase letter, and 1 special character
}
      
    
  );
}

In this example, we're defining a custom validation rule for the password field using the test method.

5. Async Validation with React Hook Form and Yup

Sometimes, you may need to perform asynchronous validation, such as checking if a username is available or if an email address is valid. React Hook Form and Yup make it easy to achieve this. Here's an example:

import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required().test('username-availability', 'Username is already taken', async (value) => {
    const response = await fetch(`/api/check-username/${value}`);
    return response.ok;
  }),
});

function MyForm() {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: schema,
  });

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

  return (
    

      
      {errors.username && 
This field is required
}
      
    
  );
}

In this example, we're defining an asynchronous validation rule for the username field using the test method.

In conclusion, React Hook Form and Yup provide a powerful combination for robust form validation. By following these five examples, you can create complex and custom validation logic to ensure the accuracy and integrity of user input data.

Don't forget to share this article with your fellow developers and leave a comment below with your thoughts on form validation using React Hook Form and Yup!