Vidyashilp Academy

Please register here to enquire for our Grade 2 waitlist.
Please register here to enquire for our Grade 2 waitlist.
import { useState } from 'react'; import { Card } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Textarea } from "@/components/ui/textarea" export default function ValidationForm() { const [formData, setFormData] = useState({ firstName: '', lastName: '', gender: '', ageGroup: '', email: '', phoneNumber: '', sports: '', location: '', message: '' }); const [errors, setErrors] = useState({}); const validate = (name, value) => { switch (name) { case 'firstName': case 'lastName': case 'location': return /^[A-Za-z\s]+$/.test(value) ? '' : 'Only alphabets allowed'; case 'email': return /^[A-Za-z0-9+_.-]+@(.+)$/.test(value) ? '' : 'Invalid email format'; case 'phoneNumber': return /^\d+$/.test(value) ? '' : 'Only numbers allowed'; case 'message': return /^[A-Za-z0-9\s]+$/.test(value) ? '' : 'Only alphabets and numbers allowed'; default: return ''; } }; const handleChange = (name, value) => { setFormData(prev => ({ ...prev, [name]: value })); const error = validate(name, value); setErrors(prev => ({ ...prev, [name]: error })); }; return (
handleChange('firstName', e.target.value)} /> {errors.firstName &&

{errors.firstName}

}
handleChange('lastName', e.target.value)} /> {errors.lastName &&

{errors.lastName}

}
handleChange('gender', value)}>
handleChange('email', e.target.value)} /> {errors.email &&

{errors.email}

}
handleChange('phoneNumber', e.target.value)} /> {errors.phoneNumber &&

{errors.phoneNumber}

}
handleChange('location', e.target.value)} /> {errors.location &&

{errors.location}

}