Phone Number Field with Comprehensive Validation
I'll create a phone number input field with robust validation using React Hook Form, Zod, and shadcn/ui components. This implementation will handle various phone number formats and provide clear feedback to users.
How This Solution Works
This phone number validation implementation provides a comprehensive approach that:
- Supports Multiple Countries: Includes validation patterns for US, UK, Canada, Australia, India, and a fallback for other countries.
- Real-time Formatting: As the user types, the phone number is automatically formatted according to the selected country's standard format.
Visual Feedback:
- Red border for invalid inputs
- Green border for valid inputs
- Clear example formats shown below the input
- Server-side Validation: Includes a server endpoint (
/api/validate-phone/route.ts) that can be used for additional validation before saving to a database. - Zod Schema Validation: Uses Zod to create robust validation schemas that can be reused across your application.
- React Hook Form Integration: Leverages React Hook Form for efficient form state management and validation.
- Accessibility: Includes proper labeling, descriptions, and error messages for screen readers.
Key Features
- Dynamic Validation: Validation rules change based on the selected country
- Format Preservation: Maintains proper formatting while editing
- Comprehensive Error Handling: Clear error messages specific to each country's format
- Success Confirmation: Shows a success message when validation passes
- Reusable Components: The validation logic is separated into a reusable library
Server Action Implementation
You can easily integrate this with a Server Action for form submission 1:
"use server"
import { validatePhoneNumber } from "@/lib/phone-validation"
export async function savePhoneNumber(formData: FormData) {
const country = formData.get("country") as string
const phoneNumber = formData.get("phoneNumber") as string
// Validate on the server
const validationResult = await validatePhoneNumber(country, phoneNumber)
if (!validationResult.valid) {
return {
success: false,
errors: validationResult.errors
}
}
// Save to database or perform other actions
// ...
return {
success: true,
data: {
country,
phoneNumber: validationResult.normalizedNumber
}
}
}
Phone Number Field with Validation
Let me fix that regular expression error and create a proper phone number field with comprehensive validation.
What I Fixed
The error was in the regular expression pattern. Instead of using a complex regex with problematic $ characters, I've implemented a more robust approach:
- I removed the problematic regex and replaced it with a cleaner validation approach
I'm using a combination of:
- Length validation (10 digits for US numbers, 11 digits with country code)
- Proper transformation to format the number consistently
Key Features
- Progressive Formatting: The phone number formats as the user types
Multiple Format Support: Handles various input formats:
- Plain numbers: 1234567890
- Dashed: 123-456-7890
- Parentheses: (123) 456-7890
- With country code: +1 (123) 456-7890
Validation Rules:
- Required field check
- Proper length validation (10 or 11 digits)
- Automatic formatting for consistency
User Experience:
- Clear error messages
- Success confirmation
- Helpful description text
This implementation uses React Hook Form with Zod validation and shadcn/ui components as requested, providing a clean, accessible phone number input with comprehensive validation.