How to use correctly zod validation scheme inside form?
Hello everyone, I have this validation scheme:
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?
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>
