Security & Quality

Yup Schema Validation

Build expressive validation schemas with Yup for form validation and data parsing in JavaScript applications.

Claude Code Cursor Copilot Windsurf

Overview

Yup is a schema validation library that provides a fluent, chainable API for defining validation rules. It has been the go-to validation library for React applications, particularly with Formik form library integration. Yup schemas define both the shape and validation constraints of data, with built-in type coercion that converts strings to numbers, dates, and booleans automatically.

The library supports conditional validation through the `.when()` method, allowing validation rules to depend on other field values. This is particularly useful for complex forms where field requirements change based on user selections. Yup also provides `.test()` for custom async validation, enabling checks against APIs like uniqueness validation.

Yup's error messages are customizable at both the schema level and globally. The library supports localization through custom locale objects, making it easy to provide error messages in multiple languages. While similar to Zod in purpose, Yup focuses on runtime validation with automatic coercion, making it particularly well-suited for form validation where input values start as strings.

Who Is This For?

Validate form inputs with Formik and Yup schemas
Define conditional validation rules for complex forms
Validate API request data with custom error messages
Set up multilingual validation error messages

Installation

Setup for Claude Code

npm install yup

Configuration

import * as yup from "yup"

const schema = yup.object({
  name: yup.string().required("Name is required").min(2),
  email: yup.string().email("Invalid email").required(),
  age: yup.number().positive().integer().nullable(),
  website: yup.string().url().optional(),
  password: yup.string().min(8).required(),
  confirmPassword: yup.string()
    .oneOf([yup.ref("password")], "Passwords must match")
    .required(),
})

await schema.validate(formData, { abortEarly: false })