Zod validator - conditional validation with refine()

[cordierna]

I'm trying to achieve some conditional validation based on an other field. I've seen in the zod doc that the refine() method would be the go-to for what I'm trying to achieve but I can't figure out how to integrate it to tanstack form validation.

Here is some sample code of what I'm trying to achieve:

const validationSchema = z.object({  
       email: z.string().optional(),
       phone: z.string().optional(),
   }).superRefine(({ email, phone }, refinementContext) => {
          console.log("refinementContext", refinementContext);
          if (email === "" && phone == "") {
              return refinementContext.addIssue({
                  code: z.ZodIssueCode.custom,
                  message: "Either email or phone is required",
                  path: ["phone","email"],
              });
          }
      });
  return (
      <>
          <div>
              <form.Field
                  name="phone"
                  validators={{
                      onChange: validationSchema?._def.schema.shape.phone,
                  }}
                  children={(field) => {
                      // Avoid hasty abstractions. Render props are great!
                      return (
                          <>
                              <label htmlFor={field.name}>phone:</label>
                              <input
                                  id={field.name}
                                  name={field.name}
                                  value={field.state.value}
                                  onBlur={field.handleBlur}
                                  onChange={(e) => field.handleChange(e.target.value)}
                              />
                              <FieldValidator field={field} />
                          </>
                      );
                  }}
              />
          </div>
          <div>
              <form.Field
                  name="email"
                  validators={{
                      onChange: validationSchema?._def.schema.shape.email,
                  }}
                  children={(field) => {
                      // Avoid hasty abstractions. Render props are great!
                      return (
                          <>
                              <label htmlFor={field.name}>email:</label>
                              <input
                                  id={field.name}
                                  name={field.name}
                                  value={field.state.value}
                                  onBlur={field.handleBlur}
                                  onChange={(e) => field.handleChange(e.target.value)}
                              />
                              <FieldValidator field={field} />
                          </>
                      );
                  }}
              />
          </div>
      </>
  );

[crutchcorn]

Right now we don't support conditional validation sadly. It's on our short list of things to do prior to 1.x - stay tuned!

[cordierna]

@crutchcorn I suppose that it's not supported globally ? Trying to do the same with Yup.when() function won't be possible either ?

Do you have a date of release for such features ?

[crutchcorn]

This is now supported here:

https://tanstack.com/form/latest/docs/framework/react/guides/linked-fields

You can do z.refine inside of onChange with onChangeListenTo

[IdoBouskila]

Hi @crutchcorn!

If I use the z.refine inside field validation, I only get the field value inside the zod refine callback (as expected), so we can't expose another field value to validate with.
Is it possible or planned to support z.refine / z.superRefine to validate the whole schema object and use the linked-fields feature with zod.

Suggested API:

const form = useForm({
    validatorAdapter: zodValidator,
    onSubmit: async ({ value }) => {
        // Do something with form data
        console.log(value)
    },
});

return (
  <form>
      <form.Field
          name='firstName'
          validators={{
              onChangeListenTo: ['lastName'],
              onChange: ({ fieldApi }) => {
                  const lastName = fieldApi.form.getFieldValue('lastName');
                  return z.string().refine((data) => data !== lastName, { message: 'First name and last name cannot be the same' });
              }
          }}
          children={ /* ... */ }
      />
  </form>
)

Thank you!

[vonazt]

Hi @crutchcorn - is there still any plans to allow for the use of .superRefine in v1? We've managed to simplify a lot of our codebase and validation logic by consolidating our Zod schema into single schema for each form/entity interaction we want to create, but doing so for some of the schema requires conditional validation that requires .superRefine for, e.g., providing the correct error path for an array of objects or accessing a parent value to validate a field in a nested object, and also validating onSubmit rather than onChange.