useForm

how to validates an input before getting filled? the input before it must have value first before it can be filled

6 Replies

kapa.ai•12mo ago

Hi @Griyan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To validate an input before it gets filled, you can use the rules property of the Form.Item component in Ant Design, which is integrated with refine. You can define custom rules using the validator function. Here's an example:

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

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

In this example, the input field for "Title" is required and must have a minimum of 5 characters. If you want to validate an input based on the value of a previous input, you can use a custom validator function. However, the specific code for this is not provided in the extracts. For more information, you can refer to the Custom Form Validation (https://refine.dev/docs/examples/form/antd/custom-form-validation/) and Server-Side Form Validation (https://refine.dev/docs/advanced-tutorials/forms/server-side-form-validation/) sections in the refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

exotic-emerald•12mo ago

how to trigger useForm fetch after the render is finished @kapa.ai

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In refine, the useForm hook automatically fetches data when the component is mounted. This means that the fetch operation is triggered after the initial render is finished. Here's an example of how to use useForm:

import { useForm } from "@refinedev/react-hook-form";  

const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  

 // Rest of the component
};

import { useForm } from "@refinedev/react-hook-form";  

const PostEditPage: React.FC = () => {  
 const {  
 refineCore: { onFinish, formLoading },  
 register,  
 handleSubmit,  
 formState: { errors },  
 } = useForm();  

 // Rest of the component
};

In this example, useForm fetches the data for the form when PostEditPage is mounted. If you want to manually refetch data after a certain event, you can use the refetch function provided by the queryResult object from useForm, useTable, or useShow hooks. Here's an example:

const { queryResult: { refetch } } = useForm();

const { queryResult: { refetch } } = useForm();

You can call refetch() whenever you want to fetch the data again. For more information, refer to the refine documentation (https://refine.dev/docs/faq/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

exotic-emerald•12mo ago

how to trigger useForm fetch from @refinedev/antd package after the render is finished @kapa.ai