React JS Form Validation using Yup

In this article we will learn why you should be using Yup in your React projects, what it does exactly, with examples.

Yup is a Javascript schema builder for value parsing and validation. It allows you to create a schema, validate data against that schema, and then use the validated data. This schema can include the type of each field, as well as any validation rules that should be applied to that field.

It can be used in both client-side and server-side applications.

Why should we use Yup?

Web apps built on JavaScript Frameworks are now highly interactive and mutable. With this comes a large amount of data exchange, whether it be from API requests, form submissions, or custom objects to handle our state.

Therefore, we need to make sure that we have the right access to this mutable and large amount of data and that we are filtering correctly. And this is where Yup comes into play.

In addition, we prefer Yup validation for reasons such as;

1. Keeping individual states of each form element and managing their change.
2. Prolonge verification processes.
3. Conversion of spaghetti to code due to repetitive codes and moving away from the concept of clean code.

Yup provides for validating the data our apps consume and manipulate, in an abstract way that does not interfere with the rest of our business logic.

Installing Yup in React Projects

We can install using the following command:

npm i yup

Importing Yup

Yup has the flexibility to be imported as an entire library, or as separate components that only your component needs.

Import the entire library with:

import * as yup from 'yup';

Yup Schema Basics

It all starts by defining schema, and yup comes with a whole range of built-in, flexible, options for basic types, and options to build more complex ones.

const schema = yub.object().shape({
  //object schema
});

In the code above, the result is yup schema. The parameter of the shape function is an empty object, so it does not test anything, but this is where you would pass validation details for your data. For that, let’s consider the next values and build a validation object for them.

const schema = yup.object().shape({
  firstName: yup.string(),
  lastName: yup.string(),
  age: yup.number(),
  email: yup.string(),
  created: yup.date(),
});

Once we have both data and schema defined, data can be tested. For that, our schema has an isValid function that returns a promise that resolves with Boolean status.

const valid = schema.isValid(data).then((valid) => {
  console.log(valid); // true
});

Yup Schema Example

We will create new schema object with Yup. This schema will define all values (form fields) we want to validate. These values will be e-mail, password, repeat password.

Sign up form

We will want all these values to be string() and required(). We will specify the e-mail value to match email format, with email().

const EmailSchema = Yup.object().shape({
    email: Yup.string()
      .email()
      .required("Required.")
})

We will also specify that password has to be at least 8 characters long with min(8). And also specify that password must to include at least one number, at least one lowercase character, at least one uppercase character and at least one symbols.

const PasswordSchema = Yup.object().shape({
    password: Yup.string()
      .min(8, "You must enter at least 8 characters.")
      .matches(/[0-9]/, "You must enter at least one number.")
      .matches(/[a-z]/, "You must enter at least one lowercase letter.")
      .matches(/[A-Z]/, "You must enter at least one uppercase letter.")
      .matches(/[#?!@$%^&*-]/, "You must enter at least one symbols.")
      .required("Required.")
})

All of these criteria will also be in the repeat password section. But in addition to these, we need to check whether it matches the password entered password section. We can use the oneOf parameter for this.

const PasswordSchema = Yup.object().shape({
    password: Yup.string()
      .min(8, "You must enter at least 8 characters.")
      .matches(/[0-9]/, "You must enter at least one number.")
      .matches(/[a-z]/, "You must enter at least one lowercase letter.")
      .matches(/[A-Z]/, "You must enter at least one uppercase letter.")
      .matches(/[#?!@$%^&*-]/, "You must enter at least one symbols.")
      .required("Required.")
    repeatPassword: Yup.string()
      .oneOf([Yup.ref('password')], "Passwords must match.")
      .required("Required.")
})

We have thus completed a simple yup validation example.

Where to go from here

Now we should have a solid understanding of what Yup is, why it is used, and perhaps some ideas on how it can be implemented in our projects.