What is Yup?

According to the official documentation, Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup schemas are extremely expressive and allow modeling complex, interdependent validations, or value transformation.

Confused?

Yup makes it easy

• Validating user input on web forms, such as login forms, registration forms, and search forms.

• Validating data sent from a client to a server, such as API requests.

• Validating data retrieved from a database or other data source.

Key Features

• Yup is a schema validation library for JavaScript objects.

• It supports a wide range of validation rules, including required fields, string length, number ranges, and regular expressions.

• Yup allows you to define complex validation rules by chaining validation methods together.

• Yup can be used on both the client and server-side of a web application.

• Yup is highly configurable and allows you to customize error messages and other aspects of the validation process.

• Yup is lightweight and easy to use, making it a popular choice for many web developers.

Why use Yup when we can write our custom validation logic?

• Yup provides a standardized way of performing validation, which can save time and reduce errors.

• Yup is highly configurable, allowing you to customize the validation process to fit your specific needs.

• Yup is lightweight and easy to use, making it a popular choice for many web developers.

Sounds great ? but how do we use it?

Yup Installation & usage

Here's an example of how to install Yup using NPM:

npm install yup

Once Yup is installed, we can import it into our JavaScript code and start using it for validation. Here's an example:

import * as yup from 'yup';

Defining yup schema

With Yup now imported, we can define a schema for our data and use it to perform validation. Here's an example:

const schema = yup.object().shape({
  name: yup.string().required(),
});

Once we have a schema defined, we can use it to validate data. Here's an example of how to use the schema to validate a user object:

const user = { name: 'Mr Robot' };
schema.validate(user)
  .then(() => {
    console.log('User is valid');
  })
  .catch((err) => {
    console.error(err);
  });

Example schema for validating the passwords:

// yup schema for validating the passwords
const passwordSchema = Yup.object().shape(
  {
    passwordLength: Yup.number()
    .min(6, 'should be atleast 6 chars long')
    .max(12, 'should be max 12 chars long')
    .required("Length is required")
  })

Conclusion

Yup is a strong and adaptable npm module for JavaScript schema validation. It offers a standardized and customizable method for validating human input, API requests, and other data sources. Yup is an excellent choice for developers to ensure the accuracy and integrity of the data due to its extensive set of validation criteria and customization options. Because of its lightweight and user-friendly nature, it is a popular option when it comes to form-validation packages. Yup allows developers to save time and reduce errors, resulting in more robust and dependable web apps.

Learn more

Thank you very much for reading, I hope this article added some value to your developer life ✌️

connect with the author

LinkedIn