add validations in register page
This commit is contained in:
aryabenade
@@ -37,19 +37,56 @@ export default function RegisterPage() {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
if (!formData.firstName.trim()) return toast.error('First name is required'), false;
|
||||
if (!formData.lastName.trim()) return toast.error('Last name is required'), false;
|
||||
if (!formData.emailAddress.includes('@')) return toast.error('Invalid email address'), false;
|
||||
if (!formData.isdCode.startsWith("+")) toast.error("ISD code must start with '+'"), false;
|
||||
if (!/^\+\d+$/.test(formData.isdCode)) toast.error("ISD code must contain only numbers after '+'"), false;
|
||||
if (!/^\d+$/.test(formData.mobileNumber)) return toast.error('Invalid mobile number'), false;
|
||||
if (!formData.address1.trim()) return toast.error('Address required'), false;
|
||||
if (!formData.city.trim()) return toast.error('City required'), false;
|
||||
if (!formData.state.trim()) return toast.error('State required'), false;
|
||||
if (!/^\d+$/.test(formData.postalCode)) return toast.error('Postal code should only contain numbers'), false;
|
||||
return true;
|
||||
};
|
||||
const validateForm = () => {
|
||||
// First Name
|
||||
if (!formData.firstName.trim()) return toast.error('First name is required'), false;
|
||||
if (!/^[A-Za-z]+$/.test(formData.firstName)) return toast.error('First name must contain only alphabets'), false;
|
||||
if (formData.firstName.length < 2 || formData.firstName.length > 50) return toast.error('First name must be between 2 and 50 characters'), false;
|
||||
|
||||
// Last Name
|
||||
if (!formData.lastName.trim()) return toast.error('Last name is required'), false;
|
||||
if (!/^[A-Za-z]+$/.test(formData.lastName)) return toast.error('Last name must contain only alphabets'), false;
|
||||
if (formData.lastName.length < 2 || formData.lastName.length > 50) return toast.error('Last name must be between 2 and 50 characters'), false;
|
||||
|
||||
// Email
|
||||
if (!formData.emailAddress.includes('@')) return toast.error('Invalid email address'), false;
|
||||
|
||||
// ISD Code
|
||||
if (!formData.isdCode.startsWith("+")) return toast.error("ISD code must start with '+'"), false;
|
||||
if (!/^\+\d+$/.test(formData.isdCode)) return toast.error("ISD code must contain only numbers after '+'"), false;
|
||||
|
||||
// Mobile Number
|
||||
if (!/^\d+$/.test(formData.mobileNumber)) return toast.error('Invalid mobile number'), false;
|
||||
if (formData.mobileNumber.length < 7 || formData.mobileNumber.length > 15) return toast.error('Mobile number must be between 7 and 15 digits'), false;
|
||||
|
||||
// Address Line 1
|
||||
if (!formData.address1.trim()) return toast.error('Address required'), false;
|
||||
if (!/^[A-Za-z0-9\s]+$/.test(formData.address1)) return toast.error('Address must be alphanumeric'), false;
|
||||
if (formData.address1.length < 5 || formData.address1.length > 100) return toast.error('Address must be between 5 and 100 characters'), false;
|
||||
|
||||
// City
|
||||
if (!formData.city.trim()) return toast.error('City required'), false;
|
||||
if (!/^[A-Za-z\s]+$/.test(formData.city)) return toast.error('City must contain only alphabets'), false;
|
||||
if (formData.city.length < 2 || formData.city.length > 50) return toast.error('City must be between 2 and 50 characters'), false;
|
||||
|
||||
// State
|
||||
if (!formData.state.trim()) return toast.error('State required'), false;
|
||||
if (!/^[A-Za-z\s]+$/.test(formData.state)) return toast.error('State must contain only alphabets'), false;
|
||||
if (formData.state.length < 2 || formData.state.length > 50) return toast.error('State must be between 2 and 50 characters'), false;
|
||||
|
||||
// Country
|
||||
if (!formData.country.trim()) return toast.error('Country required'), false;
|
||||
if (!/^[A-Za-z\s]+$/.test(formData.country)) return toast.error('Country must contain only alphabets'), false;
|
||||
if (formData.country.length < 2 || formData.country.length > 50) return toast.error('Country must be between 2 and 50 characters'), false;
|
||||
|
||||
// Postal Code
|
||||
if (!/^\d+$/.test(formData.postalCode)) return toast.error('Postal code should only contain numbers'), false;
|
||||
if (formData.postalCode.length < 4 || formData.postalCode.length > 10) return toast.error('Postal code must be between 4 and 10 digits'), false;
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleRegister = async () => {
|
||||
if (!validateForm()) return;
|
||||
@@ -79,182 +116,182 @@ export default function RegisterPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-gray-50 w-full">
|
||||
{/* Navbar */}
|
||||
<Navbar activeCity="" />
|
||||
<div className="min-h-screen flex flex-col bg-gray-50 w-full">
|
||||
{/* Navbar */}
|
||||
<Navbar activeCity="" />
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-grow w-full px-6 md:px-10 py-10 mt-20">
|
||||
<div className="w-full max-w-5xl mx-auto">
|
||||
{/* Main Content */}
|
||||
<div className="flex-grow w-full px-6 md:px-10 py-10 mt-20">
|
||||
<div className="w-full max-w-5xl mx-auto">
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="font-merchant text-3xl font-semibold text-gray-900 mb-2">
|
||||
Create Account
|
||||
</h2>
|
||||
<p className="font-poppins text-gray-600">
|
||||
Register to get started with City Cards
|
||||
</p>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="font-merchant text-3xl font-semibold text-gray-900 mb-2">
|
||||
Create Account
|
||||
</h2>
|
||||
<p className="font-poppins text-gray-600">
|
||||
Register to get started with City Cards
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form Container */}
|
||||
<div className="bg-white rounded-2xl border border-gray-200 p-8 space-y-8">
|
||||
|
||||
{/* Personal Info */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-poppins font-semibold text-gray-800 text-lg">
|
||||
Personal Information
|
||||
</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="emailAddress" className="font-poppins font-light">Email Address</Label>
|
||||
<Input
|
||||
id="emailAddress"
|
||||
type="email"
|
||||
value={formData.emailAddress}
|
||||
disabled
|
||||
onChange={(e) => handleInputChange('emailAddress', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="isdCode" className="font-poppins font-light">ISD Code</Label>
|
||||
<Input
|
||||
id="isdCode"
|
||||
placeholder="example: +91"
|
||||
value={formData.isdCode}
|
||||
onChange={(e) => handleInputChange('isdCode', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="mobileNumber" className="font-poppins font-light">Mobile Number</Label>
|
||||
<Input
|
||||
id="mobileNumber"
|
||||
value={formData.mobileNumber}
|
||||
onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-poppins font-semibold text-gray-800 text-lg">
|
||||
Address Information
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="address1" className="font-poppins font-light">Address Line 1</Label>
|
||||
<Input
|
||||
id="address1"
|
||||
value={formData.address1}
|
||||
onChange={(e) => handleInputChange('address1', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="address2" className="font-poppins font-light">Address Line 2</Label>
|
||||
<Input
|
||||
id="address2"
|
||||
value={formData.address2}
|
||||
onChange={(e) => handleInputChange('address2', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="city" className="font-poppins font-light">City</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="state" className="font-poppins font-light">State</Label>
|
||||
<Input
|
||||
id="state"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleInputChange('state', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="country" className="font-poppins font-light">Country</Label>
|
||||
<Input
|
||||
id="country"
|
||||
value={formData.country}
|
||||
onChange={(e) => handleInputChange('country', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
|
||||
<Input
|
||||
id="postalCode"
|
||||
value={formData.postalCode}
|
||||
onChange={(e) => handleInputChange('postalCode', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{helperText && (
|
||||
<p className="text-sm text-red-500">{helperText}</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleRegister}
|
||||
disabled={isLoading || isRegistering}
|
||||
className="w-full cursor-pointer bg-gray-800 hover:bg-gray-900 md:px-10 h-12 text-white rounded-xl"
|
||||
>
|
||||
{isLoading || isRegistering ? 'Registering...' : 'Register'}
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Container */}
|
||||
<div className="bg-white rounded-2xl border border-gray-200 p-8 space-y-8">
|
||||
|
||||
{/* Personal Info */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-poppins font-semibold text-gray-800 text-lg">
|
||||
Personal Information
|
||||
</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="firstName" className="font-poppins font-light">First Name</Label>
|
||||
<Input
|
||||
id="firstName"
|
||||
value={formData.firstName}
|
||||
onChange={(e) => handleInputChange('firstName', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="lastName" className="font-poppins font-light">Last Name</Label>
|
||||
<Input
|
||||
id="lastName"
|
||||
value={formData.lastName}
|
||||
onChange={(e) => handleInputChange('lastName', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="emailAddress" className="font-poppins font-light">Email Address</Label>
|
||||
<Input
|
||||
id="emailAddress"
|
||||
type="email"
|
||||
value={formData.emailAddress}
|
||||
disabled
|
||||
onChange={(e) => handleInputChange('emailAddress', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="isdCode" className="font-poppins font-light">ISD Code</Label>
|
||||
<Input
|
||||
id="isdCode"
|
||||
placeholder="example: +91"
|
||||
value={formData.isdCode}
|
||||
onChange={(e) => handleInputChange('isdCode', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="mobileNumber" className="font-poppins font-light">Mobile Number</Label>
|
||||
<Input
|
||||
id="mobileNumber"
|
||||
value={formData.mobileNumber}
|
||||
onChange={(e) => handleInputChange('mobileNumber', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-poppins font-semibold text-gray-800 text-lg">
|
||||
Address Information
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="address1" className="font-poppins font-light">Address Line 1</Label>
|
||||
<Input
|
||||
id="address1"
|
||||
value={formData.address1}
|
||||
onChange={(e) => handleInputChange('address1', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="address2" className="font-poppins font-light">Address Line 2</Label>
|
||||
<Input
|
||||
id="address2"
|
||||
value={formData.address2}
|
||||
onChange={(e) => handleInputChange('address2', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="city" className="font-poppins font-light">City</Label>
|
||||
<Input
|
||||
id="city"
|
||||
value={formData.city}
|
||||
onChange={(e) => handleInputChange('city', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="state" className="font-poppins font-light">State</Label>
|
||||
<Input
|
||||
id="state"
|
||||
value={formData.state}
|
||||
onChange={(e) => handleInputChange('state', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<Label htmlFor="country" className="font-poppins font-light">Country</Label>
|
||||
<Input
|
||||
id="country"
|
||||
value={formData.country}
|
||||
onChange={(e) => handleInputChange('country', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="postalCode" className="font-poppins font-light">Postal Code</Label>
|
||||
<Input
|
||||
id="postalCode"
|
||||
value={formData.postalCode}
|
||||
onChange={(e) => handleInputChange('postalCode', e.target.value)}
|
||||
className="h-12 bg-gray-50 border-0 rounded-xl mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{helperText && (
|
||||
<p className="text-sm text-red-500">{helperText}</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleRegister}
|
||||
disabled={isLoading || isRegistering}
|
||||
className="w-full cursor-pointer bg-gray-800 hover:bg-gray-900 md:px-10 h-12 text-white rounded-xl"
|
||||
>
|
||||
{isLoading || isRegistering ? 'Registering...' : 'Register'}
|
||||
</Button>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-auto">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-auto">
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user