How to Create a Yup Schema for Validation in JavaScript

In this blog post, we will explore how to create a Yup schema for validation in JavaScript. Yup is a powerful schema validation library that provides a simple and declarative way to validate data. With Yup, you can define validation rules and easily validate values against those rules. We will walk through a code snippet that demonstrates how to create a Yup schema and apply validations to it.

Code

import * as yup from "yup";

export function createYupSchema(schema, config) {
  const { id, validationType, validations = [] } = config;
  if (!yup[validationType]) {
    return schema;
  }
  let validator = yup[validationType]();
  validations.forEach(validation => {
    const { params, type } = validation;
    if (!validator[type]) {
      return;
    }
    console.log(type, params);
    validator = validator[type](...params);
  });
  schema[id] = validator;
  return schema;
}

Code Explanation

The provided code snippet showcases a function createYupSchema that takes in a schema and a configuration object. The configuration object includes properties such as id, validationType, and validations. Here’s how the code works:

1. The function starts by destructuring the properties from the configuration object.

2. Next, it checks if the selected validationType is available in the Yup library. If it’s not found, the original schema is returned as is.

3. Then, a new validator is created based on the validationType using the yup[validationType]() syntax.

4. The function iterates over the validations array and applies each validation to the validator. Each validation object in the array includes properties such as params and type.

5. Within the loop, it checks if the selected type is available in the current validator. If it’s not found, the iteration continues to the next validation.

6. Finally, the validated schema is assigned to the provided id in the original schema, and the updated schema is returned.

Here’s an example usage of the createYupSchema function:

const schema = {};
const config = {
  id: "email",
  validationType: "string",
  validations: [
    {
      type: "email",
      params: []
    },
    {
      type: "required",
      params: []
    }
  ]
};

const updatedSchema = createYupSchema(schema, config);
console.log(updatedSchema);

In this example, we define a schema object and a config object. The config object specifies that we want to validate an email field (id: "email") using the string validation type. It also includes two validations: email and required. The params array is empty for both validations, indicating that no additional parameters are needed. Running the code will output the updated schema object with the email field validated.

By using the createYupSchema function with different configurations, you can easily create Yup schemas for different fields and apply various types of validations.

Conclusion

In this blog post, we have explored how to create a Yup schema for validation in JavaScript. The provided code snippet demonstrates the usage of the `createYupSchema` function to build a Yup schema and apply validations to it. Yup provides a simple and efficient way to validate data in JavaScript, making it an essential tool for any developer working with form validation or data integrity. Keep experimenting with Yup’s validation capabilities and create robust validation schemas for your applications. Happy coding!

Also checkout the following codes.

How to Create a Validation Schema in JavaScript
“Program to Create a Simple HTTP Server using Node.js”