correct-apricot

How to use correctly zod validation scheme inside form?

Hello everyone, I have this validation scheme:

export const validationSchema = {
  cover: z
    .custom<File>(value => isFile(value))
    .refine(file => file !== null && file !== undefined, {
      message: 'Обязательное поле',
    })
    .refine(file => !isFileBig(file, MAX_FILE_SIZE), {
      message: `Размер файла превышает лимит ${MAX_FILE_SIZE} МБ`,
    })
    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
      message: `Выбрать можно файл только в форматах ${concateArr(ACCEPTED_IMAGE_TYPES, 'image/')}`,
    }),
}

export const validationSchema = {
  cover: z
    .custom<File>(value => isFile(value))
    .refine(file => file !== null && file !== undefined, {
      message: 'Обязательное поле',
    })
    .refine(file => !isFileBig(file, MAX_FILE_SIZE), {
      message: `Размер файла превышает лимит ${MAX_FILE_SIZE} МБ`,
    })
    .refine(file => ACCEPTED_IMAGE_TYPES.includes(file.type), {
      message: `Выбрать можно файл только в форматах ${concateArr(ACCEPTED_IMAGE_TYPES, 'image/')}`,
    }),
}

I want to use it inside the form, I did it this way, but it doesn't work correctly, tell me how to use validation correctly in this case?

<form.Field
              name='cover'
              validators={{
                onChange: ({ value }) => {
                  try {
                    form.setFieldValue('coverFileName', value?.name)
                    validationSchema.cover.parse(value)
                    return {}
                  } catch (e) {
                    if (e instanceof z.ZodError) {
                      console.log(e.flatten().fieldErrors)
                      return e.flatten().fieldErrors
                    }
                    return {}
                  }
                },
              }}
            >
              {({ handleChange, state }) => (
                  <Upload
                    value={state.value}
                    onDrop={handleChange}
                    onClear={() => handleImageRemove('cover')}
                    accept={ACCEPTED_IMAGE_TYPES}
                    errors={state.meta.errors}
                    label='Обложка тарифа'
                    inputValue={form.getFieldValue('coverFileName')}
                    placeholder={`Размер до ${MAX_FILE_SIZE} мб. Форматы: ${concateArr(ACCEPTED_IMAGE_TYPES, 'image/')}`}
                    mb='sm'
                    required
                  />
              )}
            </form.Field>

<form.Field
              name='cover'
              validators={{
                onChange: ({ value }) => {
                  try {
                    form.setFieldValue('coverFileName', value?.name)
                    validationSchema.cover.parse(value)
                    return {}
                  } catch (e) {
                    if (e instanceof z.ZodError) {
                      console.log(e.flatten().fieldErrors)
                      return e.flatten().fieldErrors
                    }
                    return {}
                  }
                },
              }}
            >
              {({ handleChange, state }) => (
                  <Upload
                    value={state.value}
                    onDrop={handleChange}
                    onClear={() => handleImageRemove('cover')}
                    accept={ACCEPTED_IMAGE_TYPES}
                    errors={state.meta.errors}
                    label='Обложка тарифа'
                    inputValue={form.getFieldValue('coverFileName')}
                    placeholder={`Размер до ${MAX_FILE_SIZE} мб. Форматы: ${concateArr(ACCEPTED_IMAGE_TYPES, 'image/')}`}
                    mb='sm'
                    required
                  />
              )}
            </form.Field>

1 Reply

genetic-orange•14mo ago

We have the concept of validatorAdapter to make it easy to integrate zod so you just need to pass the schema, no extra logic required. Have a look here: https://tanstack.com/form/latest/docs/framework/react/guides/validation#adapter-based-validation-zod-yup-valibot

Form and Field Validation | TanStack Form React Docs

At the core of TanStack Form's functionalities is the concept of validation. TanStack Form makes validation highly customizable: You can control when to perform the validation (on change, on input, on blur, on submit...)

Gaming

Programming

How to use correctly zod validation scheme inside form?

Did you find this page helpful?