Yup Number Validation: Min, Max, Empty, NaN, Commas

“Yup number” is the schema used in Yup to validate numeric values like integers, floats, and enforce rules such as required, minimum, or maximum.

Yup’s number() schema solves real-world problems like validating user inputs for age, price, quantity, salary, ratings, and other numeric fields to ensure they are actually numbers, not strings, letters, or left empty.

It helps prevent invalid, missing, negative, or unrealistic numeric values in forms and APIs before they break database logic or business workflows.

Try It Yourself: Code Example

const exampleSchema = yup.number();

This guide walks you through every essential Yup number validation — from enforcing limits and handling nulls to validating phone formats and writing custom rules with .test().

Applying Constraints to Yup Number

In this section, we’ll explore how to apply constraints to Yup number schemas. We’ll cover:

yup.number().min(1, "Minimum is 1").max(100, "Maximum is 100");

The above schema validates that a numeric input stays within a specific range, using .min() to enforce a minimum value of 1 and .max() to enforce a maximum value of 100, ensuring that any input outside this range triggers a clear error message.

yup.number().moreThan(0, "Value must be greater than 0").lessThan(100, "Value must be less than 100");

This schema ensures that a numeric input is greater than 0 and less than 100, using .moreThan() to enforce a minimum threshold and .lessThan() to enforce a maximum limit, providing clear error messages if the input falls outside this range.

yup.number().required("Value is required").typeError("Value must be a number")

This schema demonstrates required vs not required behavior:

• .required() ensures the field exists (not undefined or null).
• .typeError() handles empty strings or non-numeric values, which otherwise bypass .required().
• The number 0 passes validation because Yup treats it as a valid number, while "" or undefined triggers the appropriate error messages.

yup.number().positive("Value must be positive").min(0, "Value must be positive or zero")

This schema ensures numeric input follows positivity rules /not negative.

• .positive() enforces numbers greater than 0.
• .min(0) allows zero as a valid value, so you can handle cases where both positive numbers and zero are acceptable.

yup.number().negative("Value must be negative")

This schema ensures the input is a negative number. Any positive number or zero will trigger the error message "Value must be negative"

yup.number().round('ceil')
yup.number().truncate().integer("Value must be integer")

• .round('ceil') → rounds up to nearest integer.
• .truncate().integer() → strips decimals, then checks it’s a valid integer.

Handling Empty String, NaN, Null, and Undefined with Yup Number

yup.number().nullable().notRequired().transform((value, originalValue) => {
	if (originalValue === "") return undefined;
	if (isNaN(value)) return undefined;
	return value;
})

• yup.number() normally fails when input is "", NaN, or non-numeric.
• Using .transform(), we intercept values before validation.

We convert:

• "" → undefined
• NaN → undefined (or null, or 0… depending on your choice)

• Then .nullable() and .notRequired() make null and undefined valid.
• This gives you a schema where empty input, NaN, null, and undefined are all accepted — no validation errors.

Phone Number Validation in Yup

yup.string().required("Phone number is required").matches(/^\+?[0-9\s-]{7,15}$/, "Invalid phone number format");

• .string() → Phone numbers should be treated as strings (not numbers), because numbers like +91 98765 43210 would break if parsed as integers.
• .required() → Ensures a value is entered.
• .matches(regex) → Uses a regex pattern to validate phone formats.

The regex used:

• ^\+? → Optional + at the start (for country codes)
• [0-9\s-]{7,15}$ → Allows digits, spaces, and hyphens, with 7–15 characters

Validating Numbers with Commas in Yup

yup.number()
  .transform((value, originalValue) => {
    if (typeof originalValue === "number") return value;

    if (typeof originalValue === "string") {
      const cleaned = originalValue.replace(/,/g, "");
      if (cleaned.trim() === "") return undefined;
      return Number(cleaned);
    }
    return value;
  })
  .typeError("Value must be a valid number")
  .required("Number is required");

This Yup validation uses .transform() to fix the issue where users enter numbers with commas like "1,000". Normally, Yup tries to convert values to numbers automatically, but JavaScript returns NaN when it sees commas in a number string.

The .transform() function solves this by intercepting the original input before Yup validates it. Inside the transform, it checks if the original value is a string; if it is, it removes all commas using replace(/,/g, "") and converts the cleaned string into a number using Number().

That way, "1,000" becomes 1000, which is a valid number. If the value still isn’t a valid number after conversion, Yup shows the error message from .typeError() saying the input must be a valid number.

Finally, .required() ensures that the field cannot be empty. In summary, this code allows users to type numbers with commas while still validating them correctly as real numeric values.

Summary

The Yup number() schema is a powerful tool for validating numeric inputs in forms and APIs. It ensures values are real numbers—not strings, letters, or empty values—and allows you to apply rules like minimum, maximum, positive, or negative values.

Using methods such as .min(), .max(), .moreThan(), and .lessThan(), you can control numeric ranges, while .required() and .typeError() help distinguish between missing values and invalid inputs like empty strings or non-numeric data.

You can also enforce integer behavior using .round(), .truncate(), or .integer(). Real-world flexibility is added through .nullable(), .notRequired(), and .transform(), allowing the schema to accept empty strings, null, undefined, and even convert values like "1,000" into valid numbers.

While phone numbers should be handled as strings using .matches() and regex, comma-separated numbers, decimals, and NaN can still be managed effectively in .number() using custom transformations.

Overall, Yup’s number schema prevents invalid, unrealistic, or broken numeric inputs before they affect backend logic or business workflows.