Integration with Yup for Schema-Based Validation in React JS

In React development, managing form validation can be tricky, especially for complex forms with multiple fields and different validation rules. One effective way to handle validation is by using Yup, a schema builder for validation that works seamlessly with libraries like Formik and React Hook Form. Yup allows you to define a validation schema for your form inputs and validates them in a declarative way. This article explains how to integrate Yup with React for schema-based validation.

1. What is Yup?

Yup is a JavaScript library used for schema validation. It provides a simple and powerful way to define validation rules for objects, arrays, and other data types. Yup integrates well with popular form management libraries such as Formik and React Hook Form. By using Yup, you can easily define complex validation logic and maintain the validation rules separately from your form components.

2. Setting up Yup

Before you begin using Yup for validation in your React application, you need to install the Yup library: 

        
          npm install yup

Once installed, you can import Yup into your React components to define validation schemas for your forms.

3. Example: Using Yup with Formik

Formik is one of the most popular libraries for handling forms in React. By integrating Yup with Formik, you can define a schema for form validation and easily bind it to your form's submission process.

Step-by-Step Example using Formik and Yup

        
          import React from 'react';
          import { Formik, Field, Form, ErrorMessage } from 'formik';
          import * as Yup from 'yup';

          const validationSchema = Yup.object({
            email: Yup.string().email('Invalid email address').required('Email is required'),
            password: Yup.string()
              .min(6, 'Password must be at least 6 characters')
              .required('Password is required')
          });

          const ExampleForm = () => {
            return (
               {
                  console.log(values);
                }}
              >
                

                  

                    
                    
                    
                  


                  

                    
                    
                    
                  


                  
                

              
            );
          };

          export default ExampleForm;

In this example, the validationSchema is defined using Yup. The schema specifies that the email must be a valid email address and that both the email and password fields are required. The password field also has a minimum length validation of 6 characters.

The validation schema is passed to Formik via the validationSchema prop, which automatically validates the form values before submission. If any field does not meet the validation criteria, an error message is displayed.

4. Example: Using Yup with React Hook Form

React Hook Form is another popular library for managing forms in React. You can easily integrate Yup with React Hook Form to handle schema-based validation. Below is an example of how to use Yup with React Hook Form for form validation.

Step-by-Step Example using React Hook Form and Yup

        
          import React from 'react';
          import { useForm } from 'react-hook-form';
          import { yupResolver } from '@hookform/resolvers/yup';
          import * as Yup from 'yup';

          const validationSchema = Yup.object({
            email: Yup.string().email('Invalid email address').required('Email is required'),
            password: Yup.string()
              .min(6, 'Password must be at least 6 characters')
              .required('Password is required')
          });

          const ExampleForm = () => {
            const { register, handleSubmit, formState: { errors } } = useForm({
              resolver: yupResolver(validationSchema)
            });

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

            return (
              

                

                  
                  
                  {errors.email && 
{errors.email.message}
}
                


                

                  
                  
                  {errors.password && 
{errors.password.message}
}
                


                
              

            );
          };

          export default ExampleForm;

In this example, React Hook Form is used along with the yupResolver function to integrate Yup validation. The schema defined with Yup specifies the validation rules for both the email and password fields.

The resolver is used to tell React Hook Form to use Yup for validation. When the user submits the form, React Hook Form will validate the form values according to the Yup schema before calling the onSubmit function.

5. Why Use Yup?

Yup offers several advantages when working with forms in React:

  • Declarative Validation: Yup lets you define validation rules declaratively, making it easy to understand and maintain validation logic.
  • Schema-based Validation: Yup allows you to define a complete schema for your form inputs, which is reusable and easy to test.
  • Integrates with Popular Libraries: Yup works well with libraries like Formik and React Hook Form, making it a versatile option for form validation in React applications.

Conclusion

Integrating Yup with form libraries like Formik and React Hook Form is an efficient way to handle schema-based validation in React. By defining a Yup validation schema, you can easily manage complex validation rules, ensure form data integrity, and keep your form logic clean and maintainable. Whether you're using Formik or React Hook Form, Yup provides a powerful and flexible way to validate form inputs in React applications.




Advertisement