Last active
December 5, 2022 15:37
-
-
Save umschaudhary/49b2c18891a213c7fc06328a58078075 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import UserRegistrationForm from './UserRegistrationForm' | |
function App() { | |
return ( | |
<div className="App"> | |
<UserRegistrationForm /> | |
</div> | |
) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 UserRegistrationForm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'), | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment