Implement a reusable form validation system that provides immediate,
contextual feedback to users with inline error messages and visual indicators.
Features:
- Real-time validation on input, blur, and submit events
- Inline error and success messages displayed near form fields
- Visual indicators for required vs optional fields (asterisks)
- Subtle validation styling with softer colors and smaller icons
- Phone number validation for tel/phone fields (7-15 digits, optional country code)
- Email, URL, number, date, and pattern validation support
- Debounced validation to reduce performance impact
- Form-level error messages on submit
- Automatic focus management for invalid fields
Technical improvements:
- Prevent duplicate initialization with form and field flags
- Smart message container insertion that respects existing form structure
- Better detection of existing required indicators to prevent duplicates
- Hidden messages take zero space (height: 0) to prevent layout shifts
- Graceful error handling with try-catch blocks
Styling:
- Subtle visual feedback with green-300/red-300 borders (softer than before)
- Smaller validation icons (0.875rem) and reduced padding (2rem)
- Reduced opacity for messages (0.75-0.85) for less intrusive appearance
- Lighter focus shadows (0.08 opacity) for subtle feedback
- Dark mode support with appropriate color adjustments
Applied to all forms:
- Projects (create/edit)
- Clients (create/edit)
- Tasks (create/edit)
- Invoices (create/edit)
- Payments (create/edit)
- Expenses, Mileage, Per Diem forms
- Time Entry (manual entry)
- Weekly Goals
Fixes:
- Prevent duplicate message containers and layout breaks
- Better insertion logic that respects existing help text
- Improved container detection to avoid duplicates
- Fixed required indicator duplication issues
- Enhanced form submission handler management
The validation system automatically initializes on forms with
data-validate-form attribute or novalidate attribute, providing
consistent validation UX across the application.
