dependent-tan•9mo ago

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 🙂

8 Replies

kapa.ai•9mo ago

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:

const { saveButtonProps } = useForm();  
  
function UserCreate() {  
 return <Create saveButtonProps={saveButtonProps}></Create>;  
}  
export default UserCreate;

const { saveButtonProps } = useForm();  
  
function UserCreate() {  
 return <Create saveButtonProps={saveButtonProps}></Create>;  
}  
export default UserCreate;

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: ----------------------

kapa.ai•9mo ago

<@305970367405490186> kapa.ai is still learning and improving, please let us know how it did by reacting below

dependent-tan•9mo 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;

kapa.ai•9mo ago

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: ----------------------

kapa.ai•9mo ago

<@305970367405490186> kapa.ai is still learning and improving, please let us know how it did by reacting below

dependent-tan•9mo 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 🙂

kapa.ai•9mo ago

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: ----------------------

kapa.ai•9mo ago

<@305970367405490186> kapa.ai is still learning and improving, please let us know how it did by reacting below