extended-salmon

Zod Integration

Hey guys, is there a way of applying a zod schema "globally" to a form instead of applying the zod properties to each individual field. Something like import { validateForm } from "./formValidator" const form = useForm({ validatorAdapter: zodValidator(validateForm), etc, }) but the above obviously doesnt work

12 Replies

extended-salmonOP•2y ago

Ive got like 20 inputs and my code is going to make my eyes roll over

sunny-green•2y ago

Wait, that should work What are you running into? Oh, sorry, I see what you're saying The API is like this:

import { validateForm } from "./formValidator"
const form = useForm({
    validatorAdapter: zodValidator,
    validators: {
         onChange: validateForm
    }
})

import { validateForm } from "./formValidator"
const form = useForm({
    validatorAdapter: zodValidator,
    validators: {
         onChange: validateForm
    }
})

extended-salmonOP•2y ago

Thanks! I'll play around with that, started changing all my apps forms yesterday, TS form is mind blowing

sunny-green•2y ago

Thanks so much!

extended-salmonOP•2y ago

haha no thank YOU

yelping-magenta•2y ago

Hello, is it possible to pass multiple fields for validation using zod and useForm in "@tanstack/react-form": "0.13.5", "@tanstack/zod-form-adapter": "0.13.5",? e.g. I tried to pass zod schema to useForm, but for me, zod validation not triggered

const onChangeSchema = z.object({
  inputText1: z.string().min(3),
  inputText2: z.string().min(4, 'First name must be at least 4 characters'),
});

...


const form = useForm({
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value);
  },
  validators: {
    onChange: onChangeSchema,
  },
  // Add a validator to support Zod usage in Form and Field
  validatorAdapter: zodValidator,
});

...
<div>
        <form.Field
          name="inputText1"
          children={(field) => {
            // Avoid hasty abstractions. Render props are great!
            return (
              <>
                <label htmlFor={field.name}>First Name:</label>
                <input
                  id={field.name}
                  name={field.name}
...

const onChangeSchema = z.object({
  inputText1: z.string().min(3),
  inputText2: z.string().min(4, 'First name must be at least 4 characters'),
});

...


const form = useForm({
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value);
  },
  validators: {
    onChange: onChangeSchema,
  },
  // Add a validator to support Zod usage in Form and Field
  validatorAdapter: zodValidator,
});

...
<div>
        <form.Field
          name="inputText1"
          children={(field) => {
            // Avoid hasty abstractions. Render props are great!
            return (
              <>
                <label htmlFor={field.name}>First Name:</label>
                <input
                  id={field.name}
                  name={field.name}
...

or I need to access validators within form.Field as below 🧐 ?

const onChangeSchema = {
  inputText1: z.string().min(3),
  inputText2: z.string().min(3, 'First name must be at least 3 characters'),
};
...
      <form.Field
              name="inputText1"
              validators={{onChange: onChangeSchema.inputText1}}

const onChangeSchema = {
  inputText1: z.string().min(3),
  inputText2: z.string().min(3, 'First name must be at least 3 characters'),
};
...
      <form.Field
              name="inputText1"
              validators={{onChange: onChangeSchema.inputText1}}

sunny-green•2y ago

This first (and second) code sample should work fine. I'll need a minimal repro to investigate further

yelping-magenta•2y ago

thank you for fast reply, here is the link for fist code https://stackblitz.com/edit/react-kxyjeu?file=src%2FApp.js . I wonder, what I'm missing here. The second approach is working fine.

sunny-green•2y ago

Oh I see the problem When you use useForm's validators, they're not field errors anymore; they're form errors Which makes me realize we need to change the form errors a bit more Blech

yelping-magenta•2y ago

ok, I do see the errors under form.store.state.errors at moment. Thank you for clarification. I tried the 1 approach again to see if I could differentiate the error message for a specific field by using either form.store.state.errors or field.form.state.errors instead of <FieldInfo field={field} />. Unfortunately, when using the form, I encountered difficulty displaying the error message for the specific field... Hence, for now I would stick to second approach.

correct-apricot•15mo ago

was a change made to the API? I works just if I use zodValidator() but if I use zodValidator as the example, it doesnt work.

rising-crimson•15mo ago

Yes the adapter is now a function that has to be called

Gaming

Programming

Zod Integration

Did you find this page helpful?