How to add Zod validation to Create ressource page
Hi everyone! I'm using Refine with Next.js, MUI and a custom express API as a dataprovider. and I need help with Zod validation on CRUD pages.
I have a zod UserSchema which i'm passing to the useForm() like this
import { UserSchema } from "src/validation/user.validate"; import { zodResolver } from '@hookform/resolvers/zod'; const { saveButtonProps, refineCore: { formLoading, queryResult }, register, control, formState: { errors }, } = useForm({ resolver: zodResolver(UserSchema),
}); The validation is working fine but the save button no longer works. What should I do next? I tried adding an onClick to the saveButtonProps but that did not work. I'm new to Refine and still learning 🙂
import { UserSchema } from "src/validation/user.validate"; import { zodResolver } from '@hookform/resolvers/zod'; const { saveButtonProps, refineCore: { formLoading, queryResult }, register, control, formState: { errors }, } = useForm({ resolver: zodResolver(UserSchema),
}); The validation is working fine but the save button no longer works. What should I do next? I tried adding an onClick to the saveButtonProps but that did not work. I'm new to Refine and still learning 🙂
8 Replies
Hi @smilodon.x7. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hello! It's great to see you're using Refine with Next.js, MUI, and a custom express API.
From the information provided in the extracts, it seems like you're on the right track with using the
useForm
hook and passing the zodResolver
to it. However, to make the save button functional, you need to pass the saveButtonProps
to the Create
or Edit
component.
Here's an example from the extracts:
In this example, saveButtonProps
is destructured from useForm
and passed to the Create
component. This makes the save button on the Create page functional. When clicked, it handles the post request for the record inputted on the form.
If you're still having trouble, it might be helpful to check the Refine documentation (https://refine.dev/docs) or ask for help in the Refine Discord community (https://discord.com/channels/837692625737613362/1126121592905285722).
Remember, the saveButtonProps
includes properties for handling the submission of the form action, button loading, and disable states. If you're trying to add an onClick
event to saveButtonProps
, it might be conflicting with these existing properties.
I hope this helps! Let me know if you have any other questions.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@305970367405490186> kapa.ai is still learning and improving, please let us know how it did by reacting below
robust-apricot•11mo ago
@kapa.ai I already have saveButtonProps passed the the Create component, this is my code :
export const UserCreate: React.FC<IResourceComponentsProps> = () => {
const translate = useTranslate();
const {
saveButtonProps,
refineCore: { formLoading, queryResult },
register,
control,
formState: { errors },
} = useForm({
resolver: zodResolver(UserSchema),
}); return ( <Create isLoading={formLoading} saveButtonProps={saveButtonProps}> <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off"
<TextField {...register("email")} error={!!(errors as any)?.email} helperText={(errors as any)?.email?.message}
margin="normal" fullWidth InputLabelProps={{ shrink: true }} type="text" label={translate("users.fields.email")} name="email" />
{/* ...other fields here */} </Box> </Create> ); }; export default UserCreate;
}); return ( <Create isLoading={formLoading} saveButtonProps={saveButtonProps}> <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off"
<TextField {...register("email")} error={!!(errors as any)?.email} helperText={(errors as any)?.email?.message}
margin="normal" fullWidth InputLabelProps={{ shrink: true }} type="text" label={translate("users.fields.email")} name="email" />
{/* ...other fields here */} </Box> </Create> ); }; export default UserCreate;
Let me check the knowledge base for you. One moment! :books:
----------------------
Your code seems correct in terms of using
saveButtonProps
with the Create
component. The saveButtonProps
are correctly passed to the Create
component, which should make the save button functional.
However, it's important to note that the saveButtonProps
are responsible for handling the submission of the form, not the validation. The validation is handled by the resolver
property of the useForm
hook, which you've correctly set to zodResolver(UserSchema)
.
If the save button is not working, it might be due to an issue with the validation or the form submission. Here are a few things you could check:
1. Validation errors: If there are validation errors, the form will not be submitted. Check if there are any validation errors that you might have missed. You can log the errors
object to the console to see if there are any validation errors.
2. Form submission: The form submission is handled by the dataProvider.create
method, which is invoked when the save button is clicked. Check if there's an issue with your data provider or the create
method.
3. Form loading state: You're passing formLoading
to the isLoading
prop of the Create
component. If formLoading
is true
, the form might be in a loading state and not respond to user input. Check if there's an issue with the form loading state.
If you're still having trouble, you might want to reach out to the Refine community (https://discord.com/channels/837692625737613362/1126121592905285722) or check the official documentation (https://refine.dev/docs) for further assistance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@305970367405490186> kapa.ai is still learning and improving, please let us know how it did by reacting below
robust-apricot•11mo ago
@kapa.ai You were right, I had a hidden field which didn't pass my zod validation, i fixed it and now it works perfectly. My sincere apologies for this beginner mistake 🙂
Let me check the knowledge base for you. One moment! :books:
----------------------
No problem at all, we all learn from our mistakes! I'm glad to hear that you were able to fix the issue. Don't hesitate to ask if you have any more questions, whether you're a beginner or an expert, we're here to help. Happy coding with Refine! 😊
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@305970367405490186> kapa.ai is still learning and improving, please let us know how it did by reacting below