yup: compare field itself with another field

javascript yup
Heidel picture Heidel · May 21, 2019 · Viewed 10.7k times · Source

I had

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when(
        "StartIntensity",
        (StartIntensity: number, schema: any) => {
            return !!StartIntensity
                ? schema.moreThan(
                        StartIntensity,
                        "Max should be > min"
                  )
                : schema;
        }
    ),

but I need something like that

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when(
        "StartIntensity, EndIntensity",
        (StartIntensity: number, EndIntensity: number, schema: any) => {
            return !!StartIntensity && StartIntensity !== EndIntensity
                ? schema.moreThan(
                        StartIntensity,
                        "Max should be > min"
                  )
                : schema;
        }
    ),

but code above doesn't work properly. Is there any possibility to make this work ot other ways to execute this validation?

Answer

Antoni4 picture Antoni4 · May 22, 2019

In your case first argument of .when() should be an array of keys:

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when(
        ["StartIntensity", "EndIntensity"],
        (StartIntensity: number, EndIntensity: number, schema: any) => {
            return !!StartIntensity && StartIntensity !== EndIntensity
                ? schema.moreThan(
                        StartIntensity,
                        "Max should be > min"
                  )
                : schema;
        }
    ),

keys: string | Array

https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema

If the above code throws "Cyclic dependency" error (which I think it will), try the following code:

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .when('StartIntensity', (StartIntensity, schema) => {
      return schema.test({
        test: EndIntensity => !!StartIntensity && EndIntensity > StartIntensity,
        message: "Max should be > min"
      })
    }),

Or you can also use the ref:

StartIntensity: yup.number(),
EndIntensity: yup
    .number()
    .moreThan(yup.ref('StartIntensity'), "Max should be > min")

Related questions

Conditional Validation in Yup

I have an email field that only gets shown if a checkbox is selected (boolean value is true). When the form get submitted, I only what this field to be required if the checkbox is checked (boolean is true). This …

Read More
Validate phone number with Yup?

I'm trying to validate a phone number with Yup: phone: Yup.number() .typeError("That doesn't look like a phone number") .positive("A phone number can't start with a minus") .integer("A phone number can't include a decimal point") .min(8) .required(…

Read More
Validation using Yup to check string or number length

Is there a yup function that validates a specific length? I tried .min(5) and .max(5), but I want something that ensures the number is exactly 5 characters (ie, zip code).

Read More