Getting started with Formik-Part2

Hello everyone! 👋 and welcome to part 2 of the Formik series, Before jumping to this part I hope everyone has gone through the previous part of the blog If you haven't please check out Part1 of this blog first.

For those who have already gone through the previous let's continue the discussion.

In this blog we will discuss a more interesting way to write validation functions, using a library called Yup.

What is Yup ? 🤔

According to the docs: Yup is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both. Yup schema are extremely expressive and allow modeling complex, interdependent validations, or value transformations.

Installation :

npm install -s yup

Now let's import it into your form component

import * as Yup from 'yup'

• First of all, we need to define a validation schema object using Yup.

Below is the code snippet to define an empty validation schema

const validationSchema = Yup.object({})

We need to pass the validation rules for each form field inside the object that is passed to Yup.object()

Continuing with our existing form it has 3 fields: name, email and stream

Below is the code snippet for the validation rules:

const validationSchema = Yup.object({
    name : Yup.string().required("Required"),
    email : Yup.string().email("Invalid Email Format").required("Required"),
    stream : Yup.string().required("Required")
})

Let's understand the code in simple terms:

• name: For the name field we are instructing the field to be a string type and it cannot be kept empty, so the string "Required" will be shown if the user keeps the field empty.
• email: For the email field we are instructing the field to be a string type and follow a valid email format else "Invalid Email Format" error will be shown, else if the field is kept empty it will show an error "Required".
• stream: Same as the case of the name field.

Now, we need to pass this validationSchema to the useFormik hook. For this Formik has a special option/prop for Yup object schema called validationSchema , Yeah the prop name is the same as the validation object we created.

Formik will automatically transform the Yup's validation errors into a pretty object whose keys match values and touched.

Below is the code snippet for this:

const formik = useFormik({
    initialValues,
    onSubmit,
    /*validate <-- replace the previous validate prop with validationSchema*/
    validationSchema
})

So now let's change our previous code to use Yup's validation Schema

Now let's check out some more validations using the Yup library.
Let's add a password field and add validations using the Yup

The password field I just added is a mandatory field.

Now let's add some more rules to the password field.

1. Password should have a minimum length of 8 letters and a maximum of 30 letters.
2. Password should be Alphanumeric

For the first rule Yup.string() provides a method named min() and max()

password : Yup.string()
           .min(8,"Password must be at least 8 characters")
           .max(30,"Password must be less than 30 characters")
           .required("Required")

For the second rule Yup.string() provides a method named matches() where you can provide a regex to match.

password : Yup.string().matches("regex", "Error message")

Let's modify our code to add the validations:

That's it, a small introduction on Yup, if you want to know more about the validation rules in Yup, Yup has good documentation , you should check it out.

The next part of the blog will be a little bit bigger 😅 . We will see some built-in components in Formik that helps in reducing a huge part of the boilerplate code. Till then stay tuned.

Thank You for your patience. Happy Coding : )