automatic-azure•3mo ago

Headless useForm and input validation

I'm using the headless version of useForm as described here https://refine.dev/docs/data/hooks/use-form/ to make refine work with tailwind/daisyui. Works great, but what's a recommended approach to extend the provided example by form validation? To check that an input is a valid email and such. Preferably using zod, but not required.

useForm | Refine

A hook that orchestrates Refine's data hooks to create, edit, and clone data. It also provides a set of features to make it easier for users to implement their real world needs and handle edge cases such as redirects, invalidation, auto-save and more.

3 Replies

kapa.ai•3mo ago

Hi @Petr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The useForm hook in Refine provides a set of features to create, edit, and clone data. However, the headless version of useForm does not include form validation out of the box. For form validation, Refine provides extended versions of useForm hook with full support for their respective form implementations including validation, error handling, form values, and more. These are available in @refinedev/antd, @refinedev/mantine and @refinedev/react-hook-form packages. For example, in Refine with Ant Design, you can use the form validation that comes with Ant Design with the rules property of the Form.Item component. You can also prepare custom rules with the validator function. Here is 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>

(Source: Custom Form Validation (https://refine.dev/docs/advanced-tutorials/forms/custom-form-validation)) However, since you're using Tailwind/DaisyUI, you might need to implement your own form validation logic or use a third-party library like Zod. Unfortunately, the provided knowledge sources do not include an example of how to use Zod for form validation with Refine's useForm hook. For more information on how to handle forms in Refine, you can check out the Forms in Refine (https://refine.dev/docs/guides-concepts/forms/) guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

automatic-azure•3mo ago

Ah, I see that I need to swap the import for import { useForm } from "@refinedev/react-hook-form"; 👍