Scribd
Upload
15 views9 pages

React Signup Form with Validation

The document contains a React component for a signup form that utilizes the React Hook Form library with Zod for validation. It includes fields for user information such as first name, last name, username, email, phone number, password, and country/state selection. The form is designed to handle submissions and display validation messages for required fields.

Uploaded by

manishbondad3110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views9 pages

React Signup Form with Validation

The document contains a React component for a signup form that utilizes the React Hook Form library with Zod for validation. It includes fields for user information such as first name, last name, username, email, phone number, password, and country/state selection. The form is designed to handle submissions and display validation messages for required fields.

Uploaded by

manishbondad3110
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React, { useEffect, useState } from "react";

import { z } from "zod";


import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import Axios from "axios";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";

import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";

import { Input } from "@/components/ui/input";


import { Button } from "@/components/ui/button";

const FormSchema = [Link]({


first_name: [Link]().min(1, { message: "User first name is required" }),
last_name: [Link]().min(1, { message: "User last name is required" }),
user_name: [Link]().min(1, { message: "Username is required" }),
email: [Link]().email(),
password: [Link](),
phone_number: z
.string()
.min(1, { message: "Contact number is required" })
.min(10, { message: "Contact number must be of 10 digits" })
.max(10, { message: "Contact number should not be exceed 10 digits." }),
});

function SignupForm() {
// let countryDemo={
// countryid:"1",
// countryFullName:"India"
// }
// const [countryData,setCountryData]=useState([])
// const [stateData,setStateData]=useState([]);
const form = useForm({
defaultValues: {
first_name: "",
last_name: "",
email: "",
contact: "",
user_name: "",
password: "",
country_id: "",
},
resolver: zodResolver(FormSchema),
});
const handleCustomerForm = (values) => {
[Link](values);
};
return (
<div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-
[800px]">
<div className="flex justify-center items-center">
<img src="/public/[Link]" alt="img" className="h-auto w-auto" />
</div>
<div className=" flex flex-col justify-center items-center">
<h1 className="text-3xl py-4 font-bold">Signup</h1>
<div className="rounded-md bg-white px-12 py-4 ">
<Form {...form}>
<form
onSubmit={[Link](handleCustomerForm)}
className="w-96 mx-auto space-y-4"
>
<FormField
control={[Link]}
name="user_name"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="Enter your username" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={[Link]}
name="first_name"
render={({ field }) => (
<FormItem>
<FormLabel>FirstName</FormLabel>
<FormControl>
<Input placeholder="Enter your first name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={[Link]}
name="last_name"
render={({ field }) => (
<FormItem>
<FormLabel>Last Name</FormLabel>
<FormControl>
<Input placeholder="Enter your last name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={[Link]}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input
placeholder="Enter your email address"
type="email"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={[Link]}
name="phone_number"
render={({ field }) => (
<FormItem>
<FormLabel>Contact Number</FormLabel>
<FormControl>
<Input
placeholder="Enter your contact number"
type="tel"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

<FormField
control={[Link]}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your password"
type="password"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={[Link]}
name="country_id"
render={({ field }) => (
<FormItem {...field}>
<FormLabel>Country Name</FormLabel>
<FormControl>
<Select>
<SelectTrigger className="text-gray-500">
<SelectValue placeholder="Select an Option" />
</SelectTrigger>
<SelectContent>
{countryData &&
[Link](countryData).map((country) => (
<SelectItem key={[Link]}
value={[Link]}>
{[Link]}
</SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
></FormField>
<FormField
control={[Link]}
name="state"
render={({ field }) => (
<FormItem {...field}>
<FormLabel>State Name</FormLabel>
<FormControl>
<Select >
<SelectTrigger className="text-gray-500">
<SelectValue placeholder="Select an Option" />
</SelectTrigger>
<SelectContent>
{stateData &&
[Link](stateData).map((state) => (
<SelectItem key={[Link]}
value={[Link]}>
{[Link]}
</SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
></FormField>
<Button className="w-full" type="submit">
Submit
</Button>
</form>
</Form>
</div>
</div>
</div>
);
}

export default SignupForm;

// import React, { useState } from "react";

// import { Country, State, City } from "country-state-city"


// import axios from 'axios';

// const initialValues = {
// first_name: "",
// last_name: "",
// email: "",
// phone_number: "",
// password: "",
// confirm_password: "",
// user_name: "",
// };

// function Signup() {
// const [states, setStates] = useState([]);
// const country = [Link]();
// const token = [Link]('authToken')
// const handleCountry = (event) => {
// const isoCode = [Link];
// setStates([Link](isoCode));
// [Link]();
// }

// return (
// <>
// <div className=" p-7 flex justify-center"
// style={{ backgroundColor: "#d4d4d4", minHeight: "100vh" }}>
// <div className=" text-gray-800 text-xl">
// <form className="bg-gray-100 p-6 rounded-lg shadow-md">
// <div className=" grid grid-cols-2 gap-2">
// <div className="m-3 flex items-center">
// <div className=" flex flex-col">
// <label htmlFor="name" className="m-1">
// First Name :
// </label>
// <input
// type="name"
// autoComplete="off"
// name="first_name"
// id="first_name"
// placeholder="first_name"
// // value={values.first_name}
// // onChange={handleChange}
// // onBlur={handleBlur}
// className=" bg-slate-400 flex-1 w-full rounded-xl px-4 py-2
focus:outline-none focus:shadow-outline"
// />
// {/* {errors.first_name && touched.first_name ? (
// <p className=" text-red-600 text-sm">{errors.first_name}</p>
// ) : null} */}
// </div>
// </div>

// <div className="m-3 flex items-center">


// <div className="flex flex-col">
// <label htmlFor="name" className="m-1 ">
// Last Name :
// </label>
// <input
// type="name"
// autoComplete="off"
// name="last_name"
// id="last_name"
// placeholder="last_name"
// // value={values.last_name}
// // onChange={handleChange}
// // onBlur={handleBlur}
// className=" bg-slate-400 w-full flex-1 rounded-xl px-4 py-2
focus:outline-none focus:shadow-outline"
// />
// {/* {errors.last_name && touched.last_name ? (
// <p className=" text-red-600 text-sm">{errors.last_name}</p>
// ) : null} */}
// </div>
// </div>
// <div className="m-3 flex items-center">
// <div className="flex flex-col">
// <label htmlFor="email" className="m-1">
// Email :
// </label>
// <input
// type="email"
// autoComplete="off"
// name="email"
// id="email"
// placeholder="Email"
// // value={[Link]}
// // onChange={handleChange}
// // onBlur={handleBlur}
// className=" bg-slate-400 w-full flex-1 rounded-xl px-4 py-2
focus:outline-none focus:shadow-outline"
// />
// {/* {[Link] && [Link] ? (
// <p className="text-red-600 text-sm">{[Link]}</p>
// ) : null} */}
// </div>
// </div>
// <div className="m-3 flex items-center">
// <div className="flex flex-col">
// <label htmlFor="Username" className="m-1">
// User Name :
// </label>
// <input
// type="name"
// autoComplete="off"
// name="user_name"
// id="user_name"
// placeholder="User Name"
// // value={values.user_name}
// // onChange={handleChange}
// // onBlur={handleBlur}
// className=" bg-slate-400 w-full flex-1 rounded-xl px-4 py-2
focus:outline-none focus:shadow-outline"
// />
// {/* {errors.user_name && touched.user_name ? (
// <p className="text-red-600 text-sm">{errors.user_name}</p>
// ) : null} */}
// </div>
// </div>
// <div className="m-3 flex items-center">
// <div className="flex flex-col">
// <label htmlFor="Username" className="m-1 ">
// Country :
// </label>
// <select
// // onChange={handleCountry}
// // onBlur={handleBlur}
// className=" bg-slate-400 rounded-xl flex-1 px-4 py-2
focus:outline-none focus:shadow-outline"
// style={{ maxWidth: "70%" }}
// >
// <option>--Select Country--</option>
// {/* {
// [Link]((country) => (
// <option key={[Link]} value={[Link]}>
{[Link]}</option>
// ))
// } */}
// </select>
// </div>
// </div>

// <div className="m-3 flex items-center">


// <div className="flex flex-col">
// <label htmlFor="Username" className="m-1 ">
// State :
// </label>
// <select
// className=" bg-slate-400 flex-1 rounded-xl px-4 py-2
focus:outline-none focus:shadow-outline"
// // onBlur={handleBlur}
// style={{ maxWidth: "250px", minWidth: "250px" }}
// >
// <option>--Select State--</option>
// {/* {
// [Link]((state) => (
// <option key={[Link]} value={[Link]}>
{[Link]}</option>
// ))
// } */}

// </select>
// </div>
// </div>
// <div className="m-3 flex items-center">
// <div className="flex flex-col">
// <label htmlFor="number" className="m-1 ">
// Phone number :
// </label>
// <input
// type="numbers"
// autoComplete="off"
// name="phone_number"
// id="phone_number"
// placeholder="phone_number"
// // value={values.phone_number}
// // onChange={handleChange}
// // onBlur={handleBlur}
// className=" bg-slate-400 flex-1 rounded-xl px-4 py-2
focus:outline-none focus:shadow-outline "
// />
// {/* {errors.phone_number && touched.phone_number ? (
// <p className="text-red-600
text-sm">{errors.phone_number}</p>
// ) : null} */}
// </div>
// </div>

// <div className="m-3 flex items-center">

// <div className="flex flex-col">


// <label htmlFor="password" className="m-1 ">
// Password :
// </label>
// <input
// type="password"
// autoComplete="off"
// name="password"
// id="password"
// // placeholder="Password"
// // value={[Link]}
// // onChange={handleChange}
// // onBlur={handleBlur}
// className=" bg-slate-400 flex-1 rounded-xl px-2 py-2
focus:outline-none focus:shadow-outline"
// style={{ maxWidth: "720px" }}
// />
// {/* {[Link] && [Link] ? (
// <p className="text-red-600 text-sm">{[Link]}</p>
// ) : null} */}
// </div>
// </div>
// <div className="m-3 flex items-center">
// <div className="flex flex-col" >
// <label htmlFor="confirm_password" className="m-1">
// Confirm Password :
// </label>
// <input
// type="password"
// autoComplete="off"
// name="confirm_password"
// id="confirm_password"
// placeholder="Confirm Password"
// // value={values.confirm_password}
// // onChange={handleChange}
// // onBlur={handleBlur}
// className=" bg-slate-400 rounded-xl flex-1 px-2 py-2
focus:outline-none focus:shadow-outline"
// style={{ width: "250px" }}
// />
// {/* {errors.confirm_password && touched.confirm_password ? (
// <p className="text-red-600 text-
sm">{errors.confirm_password}</p>
// ) : null} */}
// </div>
// </div>
// </div>
// <button className=" bg-slate-800 flex rounded-xl m-2 px-2 text-
white p-1" type="submit">
// Registration
// </button>
// </form>
// </div>
// </div>
// </>
// );
// }

// export default Signup;

You might also like