What is zod's approach to conditionally requiring fields?

[ljunio]

I have a situation where I need to conditionally require another field based on the validity of another field. AFAIK, we can only enforce this by using refine or superRefine. The enforcement however only comes to fruition through the use of addIssue(...). Is there a way to actually set a field as a required or optional or is that basically what refine/superRefine does under the hood?

[scotttrinh]

I have a situation where I need to conditionally require another field based on the validity of another field.

You have a few choices, but it depends on what those conditions are. In all things, it's best to be as truthful to the schema as you can, which sometimes requires multiple schemas or some duplication.

Other than refine, you might also be able to represent your schema as a union where each member has a shape that is valid based on some rules, like:

const fooSchema = z.object({
  bar: z.string().min(1),
  baz: z.string().min(1),
});

const bazSchema = z.object({
  bar: z.literal(""),
  baz: z.literal(""),
});

const schema = z.union([fooSchema, bazSchema]);

schema.safeParse({ bar: "not empty", baz: "" }); // failure
schema.safeParse({ bar: "", baz: "" }); // success
schema.safeParse({ bar: "not empty", baz: "not empty also" }); // success

It might help to provide some simple examples of what problem you're trying to model.

[JacobWeisenburger]

There might be other ways to do this, but I feel like refine is the best way to be the most clear.

Here's a simple example of how to use refine for this.

const myString = z.object( {
    foo: z.string(),

    // must be optional or parse will fail before refinement is applied
    bar: z.string().optional(),
} ).refine( input => {

    // allows bar to be optional only when foo is 'foo'
    if ( input.foo !== 'foo' && input.bar === undefined ) return false

    return true
} )

// bar is optional here
console.log( myString.safeParse( { foo: 'foo' } ).success ) // true
console.log( myString.safeParse( { foo: 'foo', bar: 'bar' } ).success ) // true
console.log( myString.safeParse( { foo: 'foo', bar: undefined } ).success ) // true

// bar is required here
console.log( myString.safeParse( { foo: 'not foo', bar: 'bar' } ).success ) // true
console.log( myString.safeParse( { foo: 'not foo' } ).success ) // false
console.log( myString.safeParse( { foo: 'not foo', bar: undefined } ).success ) // false

[Aaronius]

Similarly, I can't merge a ZodUnion into a ZodObject or a ZodObject into a ZodUnion. Also, this gets really tricky when I try to use ZodEffects or ZodUnions for objects that are part of a ZodDiscriminatedUnion. 😓

[tkowalski-exxeta]

This seems to be a bug IMHO. Does any ticket exist for this?

[gabeodame]

You can apply superRefine after merging example

const mergedSchema = schemaA.merge(schemaB)
export const FormSchema = mergedSchema.superRefine((data, ctx) => {
  if (condition) {
    ctx.addIssue({
      code: z.ZodIssueCode.custom,
      message: "custom message",
      path: ["property"],
    });
  }
});

[bizmich]

how to make optional if its initially required ?

[adambak033]

Thank you really much my friend 🚀

[toxsick]

There is also #1394 now

[ramil-thrive]

I came up with something like this:

const registrationFormSchema = z.object({
    firstName: firstNameValidator,
    lastName: lastNameValidator,
    email: z.string().optional(), // Keeping both email and phone optional on base schema and validating values inside `superRefine`
    phone: z.string().optional(),
    postalCode: canadianPostalCodeValidator,
    specificGroupServices: z.string().optional(),
    isOntarioResident: booleanRadioGroupValidator,
    isAllowedToWorkInCanada: booleanRadioGroupValidator,
    isStudent: booleanRadioGroupValidator,
    hasAgreedToTermsAndPolicies: z.boolean(),
  })
  // Perform conditional validation to ensure either a valid email or phone number is provided.
  .superRefine(({ email, phone }, refinementContext) => {
    if (email === '' && phone !== '' && !getIsValidMobilePhone(phone ?? '')) {
      return refinementContext.addIssue({
        code: z.ZodIssueCode.custom,
        message: i18n.t('forms.validations.invalid.phone'),
        path: ['phone'],
      });
    }

    if (email !== '' && phone === '' && !getIsValidEmail(email ?? '')) {
      return refinementContext.addIssue({
        code: z.ZodIssueCode.custom,
        message: i18n.t('forms.validations.invalid.email'),
        path: ['email'],
      });
    }
  });

Example UI:

[thinhbg2812-2]

Here you are,
i created a new simple project with condition similar to my problem here
i move the zod schema to a separate file, and super refine init

https://github.com/thinhbg2812-2/react-hook-form-with-condition-validation

[thinhbg2812-2]

After adding the setValue "type"
i manage to get error and block submit
but will only appear after all other field are fulfilled, like "exp" in video
somehow it will not show at the same time when others conditions are not fulfilled

I'm trying the discriminatedUnion, thank you for suggestion

ScreenRecorderProject24.mp4

[BrendanC23]

Zod's refine/superRefine will only run after the schema is fully verified (otherwise, the data parameter of refine wouldn't match the expected schema and would need to be typed as unknown). If you want the refinement to occur even if experience hasn't been validated yet, you need to move it to a nested object. See this thread for more details.

const commonKeysFormSchema = z.object({
    job: z
        .object({
            type: z.enum([POST_TYPE.SPECIALIZED.toString(), POST_TYPE.GENERAL.toString()]),
            jobOpening: z.string().optional(),
            jobTitle: z.string().optional(),
        })
        .superRefine(), // Call superRefine() on a nested object instead of the entire schema
    experience: z.string({
        message: ZOD_MESSAGES.required,
    }),
});

There's an alternative using z.preprocess() in this comment but it's more complicated than just adding another level of nesting.

[thinhbg2812-2]

You are the goat sir <3

[farendivaz]

I have simillar approach, but i dont know why its not works, i try to select pekerjaan != 2 or 5, but the error message its not appear, and i still can continue to the next form.