Field validation that depends on the values of sibling/parent/cousin etc. fields

[willd-mwp]

I've been evaluating zod as an alternative to yup which is the validation library we currently use.

The type for my form state contains a property height, such as this (other properties of FormState have been omitted for brevity):

type FormState = { 
    height: {
        min: {
            isApplied: boolean,
            value: number
        },
        max: {
            isApplied: boolean,
            value: number
        },
    }
}

height.min.value has some validation rules, but some of these rules are dependent on other properties, but I'm not sure of what the recommended approach for implementing them with zod.

1. if height.min.isApplied is true, we want to apply a number().min().max(), other we just want to apply number()

   • In yup, I achieve this using the when() method, which allows referencing the value of a sibling field

     value: number().when("isApplied", {
       is: true,
       then: number().required().min(0).max(100),
       otherwise: number()
     })

   • In zod, there doesn't seem to be an equivalent of when(), and it's not clear how i could utilise any of the existing schema methods to achieve this behaviour. Maybe using union() somehow?

2. if height.min.isApplied is true AND height.max.isApplied is true, we want to apply an additional constraint that checks that height.min.value is less than height.max.value

   • In yup, I would acheive this using the test() method, which allows you to construct a custom validation check via a callback that has access to parent properties via the from array property of the ctx parameter of the callback

     number().required().min(0).max(100).test("less-than-maximum", "Min height must be less than max height",
         (value, ctx: any) => {
             const height = ctx.from[2].value.height;
             return value !== undefined && value !== null && (!height.max.isApplied || value < height.max.value);
         })

   • In zod, there's a refine() and superRefine() method for doing custom validation checks, but the ctx parameter of the superRefine() callback doesn't seem to give you access to the object tree like yup does, so I don't know how you'd reference height.max.isApplied and height.max.value from the schema applied to height.min.value

Overall I'm really liking the library, especially it's leverage of TypeScript functionality such as with discriminated unions in ZodIssue.
If anyone could suggest how zod can be used to solve the above problems, I don't think I'd have any problems recommending it over yup.

[JacobWeisenburger]

Would this work for you?

Let me know if you have any questions.

const heightSchema = z.object( {
    value: z.number(),
    min: z.number().optional(),
    max: z.number().optional(),
} ).superRefine( ( input, ctx ) => {
    const { value, min, max } = input

    if ( min != null && value < min ) {
        ctx.addIssue( {
            code: z.ZodIssueCode.too_small,
            minimum: min,
            type: 'number',
            inclusive: true,
            message: `Height must be greater than ${ min }`,
        } )
    }

    if ( max != null && value > max ) {
        ctx.addIssue( {
            code: z.ZodIssueCode.too_big,
            maximum: max,
            type: 'number',
            inclusive: true,
            message: `Height must be less than ${ max }`,
        } )
    }
} )

console.log( heightSchema.safeParse( { value: 1 } ).success ) // true
console.log( heightSchema.safeParse( { value: 1, min: 1, max: 10 } ).success ) // true

console.log( heightSchema.safeParse( { value: 1, min: 2 } ).success ) // false
console.log( heightSchema.safeParse( { value: 11, max: 10 } ).success ) // false
console.log( heightSchema.safeParse( { value: 1, min: 2, max: 10 } ).success ) // false
console.log( heightSchema.safeParse( { value: 11, min: 2, max: 10 } ).success ) // false

[datner]

@willd-i2o

[datner]

@lveillard

[willd-mwp]

@datner

That does means that when something like zodResolver for react-hook-form applies the validation, the error would appear on height rather than on height.min.value where I would want it

[datner]

@willd-i2o
only if you don't supply the path variable 😄

ctx.addIssue({
            code: z.ZodIssueCode.too_small,
            minimum: min,
            type: 'number',
            inclusive: true,
            // The following property controls the "location" of the error
            path: ['max', 'value'], // <-- error will register under height.max.value
            message: `Max value can't be lower than min value`,
      })

[willd-mwp]

@datner

Ah, that's useful, thanks.