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!