Form validation is an essential part of building user-friendly and robust web applications. In ReactJS, handling form validation can be complex, but fortunately, libraries like Yup and Formik provide powerful solutions. Yup offers schema-based validation, while Formik simplifies form management. In this post, we'll explore how to combine Yup and Formik to create a seamless form validation experience in ReactJS applications.

Understanding Yup and Formik:

Yup is a JavaScript schema builder for value parsing and validation. It allows you to define validation schemas and validate data against those schemas. Formik, on the other hand, is a popular form management library for React that simplifies form building, handling form submission, and managing form states.

Key features of Yup and Formik:

1. Yup:

• Declarative schema definition: Define validation schemas using simple and intuitive syntax.
• Chainable API: Chain together multiple validation methods to create complex validation logic.
• Asynchronous validation: support for asynchronous validation operations.
• Error localization: built-in support for error localization, makes it easy to display localized error.

2. Formik:

• Form state management: simplifies form state management and form submission handling.
• Integration with Yup: seamless integration with Yup for form validation.
• Formik components: Provides components like <Formik>, <Field>, and <ErrorMessage> for building forms efficiently.
• Formik context: Allows access to form states and handlers across components.

Combining Yup and Formik for Form Validation: Let's see how we can combine Yup and Formik to validate a simple form in a ReactJS application.

1/ Installation:

Start by installing Yup, Formik, and their dependencies using npm or yarn.

npm install yup formik

2/ Define the validation schema with Yup:

Define a validation schema using Yup for your form fields.

import * as yup from 'yup';

const validationSchema = yup.object().shape({
    username: yup
      .string()
      .required("Username is required")
      .email("Please enter a valid email address"),
    password: yup
      .string()
      .required("Password is required")
      .min(6, "Password must be at least 6 characters"),
  });

3/ Create a Form with Formik:

Use Formik to create a form with form fields and integrate it with Yup for validation.

import { ErrorMessage, Field, Form, Formik } from "formik";

import React from "react";

import { validationSchema } from "./validations";

export default function InputForm() {
  return (
    <div>
      <h2>Form Validation In ReactJS With Formik And Yup</h2>
      <Formik
        initialValues={{
          username: "",
          password: "",
      }}
        validationSchema={validationSchema}
        onSubmit={(values) => {
          alert(JSON.stringify(values, null, 2));
        }}
      >
        <Form>
          <h2>LOGIN</h2>
          <hr />
          <label htmlFor="username">Username: </label>
          <Field type="text" name="username" id="username" />
          <ErrorMessage name="username" className="errMsg" component="div" />
          <br />
          <label htmlFor="password">Password: </label>
          <Field type="password" name="password" id="password" />
          <ErrorMessage name="password" className="errMsg" component="div" />
          <br />
          <button type="submit">Login</button>
        </Form>
      </Formik>
    </div>
  );
}

4/ Start the application:

Conclusion:

Combining Yup and Formik in ReactJS applications provides a powerful and streamlined solution for form validation and management. Yup's schema-based validation ensures that form data meets specific criteria, while Formik simplifies form building and submission handling. By integrating Yup with Formik, developers can create user-friendly and robust forms with minimal effort, enhancing the overall user experience of their applications.

References

https://formik.org/docs/tutorial

https://www.npmjs.com/package/yup