How to Validate Array of Strings using Yup
Jasser Mark Arioste
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? });12345
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 emails12345678910
If you need a required field, you can use string().required().
import { object, string, array } from 'yup' const schema = object({ requiredField: string().required() });12345
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) });123456789
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); //true123456789
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 });12345678910111213
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.
Resources #
For more information please refer to the official documentation from Yup:
Credits: Image by Maryse Rebaudo from Pixabay
