1.1 KiB
1.1 KiB
Form Validation Patterns
Purpose: Standard patterns for form validation and error handling.
Referenced by: Input Field, Form component-type instructions
Validation Types
Client-Side Validation
Required Fields:
validation:
required: true
message: 'This field is required'
Format Validation:
validation:
type: email
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
message: 'Please enter a valid email address'
Length Validation:
validation:
minLength: 8
maxLength: 100
message: 'Password must be 8-100 characters'
Error States
Visual Indicators:
- Red border
- Error icon
- Error message below field
- Error color for label
Timing:
- Show on blur (after user leaves field)
- Show on submit attempt
- Clear on valid input
Success States
Visual Indicators:
- Green border (optional)
- Success icon (optional)
- Success message (optional)
When to Show:
- After successful validation
- For critical fields (password strength)
- For async validation (username availability)
Reference this when specifying form components.