React Practice 16 Yup with React Hook Form

Pubblicato il: 07 febbraio 2026
sul canale di: Nikhil Verma

Yup : it use for form . yeh react hook form ke sath use karna hai to ract hook resolver install karna padta hai. ismain validation bahut easy ho jata hai.

first install react
// Yup is a JavaScript schema builder for value parsing and validation.
// It allows you to define schemas for your data and validate them against those schemas.
// Yup is often used in conjunction with form libraries like Formik to handle form validation in React applications.
// ise hum react hook form k sath use kr skte h form validation k liye. ise bina react hook form ke bhi use kr skte h.

// Example of using Yup for form validation:
// pehle install npm i yup react-hook-form @hookform/resolvers
// import * as Yup from 'yup'; in schema.js file main.
// https://www.npmjs.com/package/yup site link.
// https://www.npmjs.com/package/@hookfo...
site link.yup ko hook form k sath use krne k liye.
// https://github.com/jquense/yup
github link.
// https://react-hook-form.com/get-started /
react hook form site link.
// form.jsx import in this file. npm run dev ke baad web page per form show aur woh message show karege email invalid ya atleast itne charchter ho.

form.jsx file banaia and src folder main schema.js file bhi banai.
schema import in form.jsx and form.jsx import in app.jsx file main.
import {useForm} from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'; // to integrate yup with react-hook-form
import { registerSchema } from './schema'; // import schema file main.

form onSubmit={handleSubmit(onSubmit)}
input type="text" {...register('name')} placeholder='Name' /
p className='error'{errors.name?.message}/p
{/* message aayega yup ke validation se . */}
yup import in schema.js file.
.test ko // custom validation jisme admin name allow nahi hoga.three step main hota hai test validation.main value pass hoti hai jo user ne input ki hoti hai.
// trim aur lowercase bhi use kiya hai jisse form field main extra space na rahe aur lowercase main convert ho jaye.

// email: yup.string().required('Email is required').email('Email is invalid')
// .test(
// "check email",
// "Email already exists",
// async (value)={
// const res = await fetch(`https://jsonplaceholder.typicode.com/...{value}`) // yeh API call karke check karega ki email already exist karta hai ya nahi.
// const data = await res.json()
// return data.length === 0; // agar data length 0 hai to email exist nahi karta hai aur validation pass ho jayega. agar data length 0 nahi hai to email exist karta hai aur validation fail ho jayega.
// }
// ),
.when() jab condition yeh hai ki agar age 25 ya usse zyada hai to email required hoga.
confirmPassword: yup.string().required('Confirm Password is required')
.oneOf([yup.ref('password'), null], 'Passwords must match'), // confirm password validation. ismain oneOf use hota hai yeh check krne k liye k dono password same hain ya nahi.yup.ref main refrence diya jata hai original password ka.
skills : yup.array()
.of(yup.string())
.min(2, 'At least two skills must be selected')
.max(3, 'You can select up to three skills only')
// skills ke liye validation jisme kam se kam ek skill select karna zaroori hai.

if email and password aur bhi kahi use karna hai to src folder main validations folder banaya and usmain fields folder banaya and usemain email.schema.js and password.sechema.js file banaia and validation foldert main auth.schema.js file banai authorisation ke liye.

inmain yup ko import kiya.
import yup from 'yup';
export const emailSchema = yup.string().email('Email is invalid').required('Email is required')

baad main web page main form fill to condition dikhegi yeh bharo tabhi form submit hoga. form submit button per click and console main form detail show.

// jab email main aisi condition lagani ho jo kisi dusre field pe depend karti ho to yeh use hota hai. yeh kisi aur validation file main use kar sakte ho.aisi he password main aisi condition lagani ho jo kisi dusre field pe depend karti ho to yeh use hota hai.
import yup from 'yup';
export const passwordSchema = yup.string()
.min(6, 'Password must be at least 6 characters')
.matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
.matches(/[0-9]/, 'Password must 1 number')
.required('Password is required');

// jab password main aisi condition lagani ho jo kisi dusre field pe depend karti ho to yeh use hota hai. yeh kisi aur validation file main use kar sakte ho.aisi he email main aisi condition lagani ho jo kisi dusre field pe depend karti ho to yeh use hota hai.
import yup from 'yup';

auth.schema.js main email.schema.js and password.schrma .js file import kar di.
import { emailSchema } from './fields/email.schema';
import { passwordSchema } from './fields/password.schema';

and ismain validation de di and ise phir use kar sakte hain.

In questa pagina del sito puoi guardare il video online React Practice 16 Yup with React Hook Form della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Nikhil Verma 07 febbraio 2026, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 5 volte e gli è piaciuto 1 spettatori. Buona visione!

148,253

1.2K