adverse-sapphire•6mo ago

Hello everyone

I using the useForm to work a create user issue, but i wanna add a validation schema with yup, but i cant find info about it, someone can help me?

2 Replies

kapa.ai•6mo ago

Hi @mauryo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can help you with that. To use a validation schema with yup in your form, you need to follow these steps: 1. First, install the yup and the @hookform/resolvers libraries using the following command:

npm i @hookform/resolvers yup

npm i @hookform/resolvers yup

2. Once the installation is done, import yup and yupResolver and create a schema object with the following keys and values:

import * as Yup from "yup";  
import { yupResolver } from "@hookform/resolvers/yup";  
  
const schema = Yup.object().shape({  
 firstname: Yup.string().label("First Name").trim().required().min(3).max(64),  
 lastname: Yup.string().label("Last Name").trim().required().min(3).max(64),  
 address: Yup.string().label("Address").trim().required().min(3),  
 number: Yup.number().label("Number").required(),  
 work: Yup.string().label("Work").oneOf(["unemployed", "employed"]),  
 company: Yup.string().when("work", ([work], schema) => {  
 if (work === "employed") {  
 return schema.required().min(3).max(64);  
 }  
 return schema.notRequired();  
 }),  
 role: Yup.string().when("work", ([work], schema) => {  
 if (work === "employed") {  
 return schema.required().min(3).max(64);  
 }  
 return schema.notRequired();  
 }),  
});

import * as Yup from "yup";  
import { yupResolver } from "@hookform/resolvers/yup";  
  
const schema = Yup.object().shape({  
 firstname: Yup.string().label("First Name").trim().required().min(3).max(64),  
 lastname: Yup.string().label("Last Name").trim().required().min(3).max(64),  
 address: Yup.string().label("Address").trim().required().min(3),  
 number: Yup.number().label("Number").required(),  
 work: Yup.string().label("Work").oneOf(["unemployed", "employed"]),  
 company: Yup.string().when("work", ([work], schema) => {  
 if (work === "employed") {  
 return schema.required().min(3).max(64);  
 }  
 return schema.notRequired();  
 }),  
 role: Yup.string().when("work", ([work], schema) => {  
 if (work === "employed") {  
 return schema.required().min(3).max(64);  
 }  
 return schema.notRequired();  
 }),  
});

3. Finally, add a resolver key to the useForm object and pass the yupResolver function and schema to it as a value:

import { useForm } from "@refinedev/react-hook-form";  
import { HttpError } from "@refinedev/core";  
import { yupResolver } from "@hookform/resolvers/yup";  
  
// ...  
  
const { control } = useForm<IFormValue, HttpError, IFormValue>({  
 mode: "onChange",  
 defaultValues,  
 resolver: yupResolver(schema),  
});

import { useForm } from "@refinedev/react-hook-form";  
import { HttpError } from "@refinedev/core";  
import { yupResolver } from "@hookform/resolvers/yup";  
  
// ...  
  
const { control } = useForm<IFormValue, HttpError, IFormValue>({  
 mode: "onChange",  
 defaultValues,  
 resolver: yupResolver(schema),  
});

That's it! Now your form will validate the input fields based on the rules defined in the schema. For more information, you can refer to this blog post (https://refine.dev/blog/react-hook-form-validation-examples#schema-validation) on the Refine website. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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