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