How to Validate Array of Strings using Yup

Hello! In this tutorial, you'll learn how to validate an array of strings using Yup validation library. First, you'll learn how to validate a string and then apply it to an array. I recently had this problem where the form requires each input field to not be empty. I'll share in this tutorial how I did it.

What is Yup?

Yup is a popular, simple, open-source, run-time validation library for JavaScript (and Typescript). Yup is a JavaScript schema validation library that provides a way to define and validate data schemas in a declarative and easy-to-use manner. It is commonly used in front-end development, particularly with forms and data input validation. Developers can create validation schemas using Yup's API, specifying the shape and constraints of the data they expect.

Introduction

Suppose, you're implementing a form where the user can input multiple emails. You'll have to check if each email is valid but how do you actually create a schema where each email is validated as an email?

import { object, string, array } from 'yup'

const schema = object({
  emails: array() //how do you validate each email in the array as an actual email? 
});

How to Validate Strings

To validate strings in yup, you'll have to use the string() function, and it's other functions.

For example, if you need a valid email you can just use string().email().

import { object, string, array } from 'yup'

const schema = object({
  email: string().email()
});

const isValid = schema.isValidSync({
    emails: ["", "@test.com"],
  });
console.log(isValid); //true which is wrong since they are clearly not emails

If you need a required field, you can use string().required().

import { object, string, array } from 'yup'

const schema = object({
  requiredField: string().required()
});

This is simple enough, now let's apply it to arrays.

How to Validate an Array of Strings in Yup

To validate an array of strings in yup, you'll have to specify the type of array you're going to validate by using the array().of() function. For example:

import { object, string, array } from 'yup'

//1. create a simple validation schema for the string
const requiredEmail = string().email().required("Email is required");

//2. apply it to the array().of() function
const schema = object({
  emails: array().of(requiredEmail)
});

Now when we try to test it again using some data, we get the correct results:

let isValid = schema2.isValidSync({
  emails: ["", "@test.com"],
});
console.log(isValid); //false

isValid = schema2.isValidSync({
  emails: ["hi@test.com", "hello@test.com"],
});
console.log(isValid); //true

How to Validate an Array of Other Types

Similarly, you can use the same technique if you want to validate an array of numbers or any type for that matter. For example:

import { object, string, array, number, boolean } from "yup";

const requiredNumber = number().required();
const optionalBoolean = boolean().optional();
const user = object({
  firstName: string().required(),
  lastName: string().required(),
});
const schema3 = object({
  numbers: array().of(requiredNumber), // array of numbers
  booleans: array().of(optionalBoolean), //array of booleans
  users: array().of(user),  // array of objects
});

That's basically it!

Conclusion

You learned how to validate array of strings when using Yup. You also learned how to validate arrays of other types and create complex array schemas by using the array().of() function. Whatever you can do with a single object, you can also do it with arrays.