React Form Validation with Formik and Yup

Form validation is an important part of any web application. It ensures that users provide valid input before submitting a form. In this blog post, we will learn how to implement form validation using Formik and yup in a React application.

Getting Started

To get started, we need to install the required packages. We will be using formik for managing our form state and yup for validation.

npm install formik yup

Setting up the form

Let's start by creating a simple form with two fields - name and email.

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const initialValues = {
  name: '',
  email: '',
};

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

const App = () => {
  return (
    <div>
      <h1>Form Validation Example</h1>
      <Formik initialValues={initialValues} onSubmit={onSubmit}>
        <Form>
          <div>
            <label htmlFor="name">Name:</label>
            <Field type="text" id="name" name="name" />
            <ErrorMessage name="name" />
          </div>
          <div>
            <label htmlFor="email">Email:</label>
            <Field type="email" id="email" name="email" />
            <ErrorMessage name="email" />
          </div>
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </div>
  );
};

export default App;

In the code above, we have defined a form with two input fields - name and email. We have also defined an onSubmit function that will be called when the form is submitted.

Adding validation

Now, let's add validation to our form using yup. We will start by creating a validation schema for our form.

import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email address').required('Email is required'),
});

In the code above, we have defined a validation schema using yup. We have specified that the name field is required and the email field must be a valid email address.
Next, we will update our Formik component to use the validation schema.

<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>

Finally, we will update our form inputs to display validation errors.

<div>
  <label htmlFor="name">Name:</label>
  <Field type="text" id="name" name="name" />
  <ErrorMessage name="name" />
</div>
<div>
  <label htmlFor="email">Email:</label>
  <Field type="email" id="email" name="email" />
  <ErrorMessage name="email" />
</div>

In the code above, we are using the ErrorMessage component from formik to display validation errors for each input field.

Conclusion

In this blog post, we have learned how to implement form validation using Formik and yup in a React application. Formik and yup provide a simple and powerful way to manage form state and validation. With these tools, you can easily create forms that are robust and user-friendly.