xenial-black•9mo ago

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

message.txt

5 Replies

kapa.ai•9mo ago

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:

<Form>  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 ...
</Form>

<Form>  
 <Form.Item  
 label="Title"  
 name="title"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
 >  
 <Input />  
 </Form.Item>  
 ...
</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: ----------------------

kapa.ai•9mo ago

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

xenial-black•9mo 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

kapa.ai•9mo ago

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:

const {  
 handleSubmit,  
} = useForm();  
  
const handleSubmission = (data) => console.log(data);  

<form onSubmit={handleSubmit(handleSubmission)}>  
 ...  
</form>

const {  
 handleSubmit,  
} = useForm();  
  
const handleSubmission = (data) => console.log(data);  

<form onSubmit={handleSubmit(handleSubmission)}>  
 ...  
</form>

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

kapa.ai•9mo ago

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