Dries Peeters b4b8bafb9a feat: Add comprehensive form validation system with real-time feedback ...

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.

2025-11-05 08:02:30 +01:00

7.5 KiB

Raw Blame History

View Raw