create
Form submitting even when failing antd validation
Even when I set
rules={[
{
required: true,
},
]}
form is still submitting even when all the fields are blank
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:
----------------------
The issue you're experiencing might be due to the way you're handling form submission. In Refine, form validation is handled by Ant Design's
Form.Item
component using the rules
property. If you've set the required
rule to true
, it should prevent the form from submitting if the field is left blank.
Here's an example of how you might set up your form:
In this example, the form will not submit if the "Title" field is left blank because the required
rule is set to true
.
If you're still experiencing issues, it might be helpful to review the Refine documentation on custom form validation (https://refine.dev/docs/advanced-tutorials/forms/custom-form-validation) and the blog post on creating dynamic forms with Ant Design (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design#validation). These resources provide more detailed information on how to set up form validation in Refine with Ant Design.
If you're still having trouble, please provide more information about your form setup so I can give a more specific answer.
----------------------
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
absent-sapphire•8mo ago
The attached code in the original post shows how I handle my form validation. Can you check if the way you're handling form submission may cause form to not be validated correctly? @kapa.ai
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm sorry, but I can't provide a specific answer without seeing the code you're referring to. However, I can give you a general guide on how to handle form submission in Refine with Ant Design.
In Refine, form submission is typically handled using the
onFinish
method from the useForm
hook. This method is passed to the onSubmit
event handler of the form. Here's an example:
In this example, the handleSubmit
method is passed to the onSubmit
event handler of the form. When the form is submitted, the handleSubmit
method is called, which in turn calls the handleSubmission
function with the form data.
If you're using Ant Design with Refine, you can handle server-side form validation errors out-of-the-box with Ant Design's useForm
hook. When the dataProvider
returns a rejected promise with an errors
field, useForm
will automatically update the error state with the rejected errors
field. You can refer to the server-side Form Validation documentation (https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/) for more information.
If you're still having trouble, please provide more information about your form setup so I can give a more specific answer.
----------------------
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