React forms with react-hook-form, Yup and tailwindcss

React forms with react-hook-form, tailwindcss and Yup for form input validation.

Introduction

Create project

npx create-react-app my-user-registration-form

Installation

npm install react-hook-form@7.40.0 tailwindcss@3.0.23b
yarn add react-hook-form@7.40.0 tailwindcss@3.0.23

Implementation

import { useForm } from 'react-hook-form'
const UserRegistrationForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()

return (
<div className="m-auto flex w-1/2 flex-col gap-4">
<h1 className="bold text-2xl underline">Registration Form</h1>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2">
<div className="input-wrapper flex flex-col">
<label htmlFor="username">Username</label>
<input
type="text"
{...register('username', {
required: 'Username is required',
minLength: {
value: 3,
message: 'Username must be at least 3 characters',
},
})}
/>
{errors.username && (
<p className="text-xs italic text-red-500">{errors.username.message}</p>
)}
</div>

<div className="input-wrapper flex flex-col">
<label htmlFor="email">Email</label>
<input
type="email"
{...register('email', {
required: 'Email is required',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
},
})}
/>
{errors.email && <p className="text-xs italic text-red-500">{errors.email.message}</p>}
</div>

<div className="input-wrapper flex flex-col">
<label htmlFor="password">Password</label>
<input
type="password"
{...register('password', {
required: 'Password is required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters',
},
})}
/>
{errors.password && (
<p className="text-xs italic text-red-500">{errors.password.message}</p>
)}
</div>
</form>
</div>
)
}

export default UserRegistrationFormtionForm
{
errors.password && <p className="text-xs italic text-red-500">{errors.password.message}</p>
}
<div className="input-wrapper">
<button
type="submit"
className="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
>
Submit
</button>
</div>
const onSubmit = (data) => {
console.log(data)
}
import React from 'react'
import { useForm } from 'react-hook-form'

const UserRegistrationForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()

// Form submission handler
const onSubmit = (data) => {
// Do something with the form data
}

return (
<div className="m-auto flex w-1/2 flex-col gap-4">
<h1 className="bold text-2xl underline">Registration Form</h1>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2">
<div className="input-wrapper flex flex-col">
<label htmlFor="username">Username</label>
<input
type="text"
{...register('username', {
required: 'Username is required',
minLength: {
value: 3,
message: 'Username must be at least 3 characters',
},
})}
/>
{errors.username && (
<p className="text-xs italic text-red-500">{errors.username.message}</p>
)}
</div>

<div className="input-wrapper flex flex-col">
<label htmlFor="email">Email</label>
<input
type="email"
{...register('email', {
required: 'Email is required',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
},
})}
/>
{errors.email && <p className="text-xs italic text-red-500">{errors.email.message}</p>}
</div>

<div className="input-wrapper flex flex-col">
<label htmlFor="password">Password</label>
<input
type="password"
{...register('password', {
required: 'Password is required',
minLength: {
value: 8,
message: 'Password must be at least 8 characters',
},
})}
/>
{errors.password && (
<p className="text-xs italic text-red-500">{errors.password.message}</p>
)}
</div>

<div className="input-wrapper">
<button
type="submit"
className="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
>
Submit
</button>
</div>
</form>
</div>
)
}

export default UserRegistrationForm
import UserRegistrationForm from './UserRegistrationForm'

function App() {
return (
<div className="App">
<UserRegistrationForm />
</div>
)
}

Yup implementation

npm install yup
npm install @hookform/resolvers@2.9.10
yarn add yup
yarn add @hookform/resolvers@2.9.10
import { object, string } from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
const validationSchema = object().shape({
username: string()
.required('Username is required')
.min(3, 'Username must be at least 3 characters'),
email: string().required('Email is required').email('Invalid email address'),
password: string()
.required('Password is required')
.min(8, 'Password must be at least 8 characters'),
})
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(validationSchema),
})
<input
type="text"
{...register('username', {
required: 'Username is required',
minLength: {
value: 3,
message: 'Username must be at least 3 characters',
},
})}
/>
<input type="text" {…register('username')} />
import React from 'react'
import { useForm } from 'react-hook-form'
import { object, string } from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'

const UserRegistrationForm = () => {
const validationSchema = object().shape({
username: string()
.required('Username is required')
.min(3, 'Username must be at least 3 characters'),
email: string().required('Email is required').email('Invalid email address'),
password: string()
.required('Password is required')
.min(8, 'Password must be at least 8 characters'),
})

const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(validationSchema),
})

// Form submission handler
const onSubmit = (data) => {
// Do something with the form data
}

return (
<div className="m-auto flex w-1/2 flex-col gap-4">
<h1 className="bold text-2xl underline">Registration Form</h1>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-2">
<div className="input-wrapper flex flex-col">
<label htmlFor="username">Username</label>
<input type="text" {...register('username')} />
{errors.username && (
<p className="text-xs italic text-red-500">{errors.username.message}</p>
)}
</div>

<div className="input-wrapper flex flex-col">
<label htmlFor="email">Email</label>
<input type="email" {...register('email')} />
{errors.email && <p className="text-xs italic text-red-500">{errors.email.message}</p>}
</div>

<div className="input-wrapper flex flex-col">
<label htmlFor="password">Password</label>
<input type="password" {...register('password')} />
{errors.password && (
<p className="text-xs italic text-red-500">{errors.password.message}</p>
)}
</div>

<div className="input-wrapper">
<button
type="submit"
className="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
>
Submit
</button>
</div>
</form>
</div>
)
}

export default UserRegistrationForm

Screenshots

--

--

Software Engineer [https://uchaudhary.com.np]

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store