Create submitting empty form
When I submit this form all inputs are ignored and it submits an empty form
5 Replies
Hi @ahnaf1022. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
If your form is submitting empty values, it could be due to a few reasons. Here are some things you can check based on the information provided in the extracts:
1. Form Validation: Ensure that you have implemented form validation correctly. Refine uses the
react-hook-form library for form validation. You can use the useForm hook to handle form validation. The handleSubmit method from the useForm hook is used to handle form submission. If the form validation is successful, handleSubmit receives the form's data. If there's an issue with your validation setup, it might be causing your form to submit empty values. Source (https://refine.dev/blog/react-hook-form-validation-examples#form-submission)
2. Form Submission Handling: Check how you're handling form submission. In Refine, you can add an onSubmit event listener directly on the form and pass the handleSubmit method to it. If you're using the onFinish method from the useForm hook, make sure you're passing it to the handleSubmit function on the form correctly. Source (https://refine.dev/blog/react-hook-form-validation-examples#form-submission)
3. Form Field Registration: Ensure that you're registering your form fields correctly with React Hook Form's register method. This is necessary for controlling the fields and emitting error messages. Source (https://refine.dev/blog/daisy-ui-react-admin-panel#productcreate--page)
4. Form Data Structure: Check the structure of your form data. If you're using the useFieldArray hook, it returns an array of objects with each field value instead of string values. This could cause issues if your API expects string values. Refine provides an onFinish hook that lets you override the save button's default configuration and define what’s sent to the server. Source (https://refine.dev/blog/dynamic-forms-in-react-hook-form#handling-submission)
If you're still having issues, it would be helpful to see the relevant code to provide more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@543682490951532554> kapa.ai is still learning and improving, please let us know how it did by reacting below
rare-sapphire•7mo ago
You can initializing a new, empty form instance with AntD's
useForm hook.
You should use formProps.form.rare-sapphire•7mo ago
rival-black•7mo ago
Thanks that was indeed the issue and I figured it out just after I posted this question