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('gender', value)}>
handleChange('firstName', e.target.value)}
/>
{errors.firstName &&
{errors.firstName}
}
handleChange('lastName', e.target.value)}
/>
{errors.lastName &&
{errors.lastName}
}
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}
}