Pro
Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Form Validation
Form validation helps ensure data quality and improves user experience by providing immediate feedback. Our validation components offer multiple approaches:
- Browser Default: Native HTML5 validation
- Custom Styles: Enhanced Bootstrap validation with custom feedback
- Server-side: Pre-validated states from backend processing
- Tooltips: Space-efficient validation messages
Best Practice: Combine client-side and
server-side validation for the most robust form validation strategy.
Browser Defaults
Browser default validation provides a lightweight, native approach using HTML5 constraints. Key features include:
- Native browser validation messages
- No additional JavaScript required
- Consistent behavior across modern browsers
- Built-in accessibility support
Browser Default Validation
Custom Styles
Custom validation styles offer enhanced visual feedback and more control over the validation experience:
- Custom feedback messages with icons
- Visual state indicators
- Flexible styling options
- JavaScript-powered validation
Note: Add the
novalidate attribute to disable browser defaults when using custom validation.
Custom Styles Validation
Server Side
Server-side validation provides pre-validated states for form fields:
- Immediate feedback from backend validation
- Persistent validation states
- Support for complex validation rules
- Enhanced security for sensitive data
Tip: Use
.is-invalid and
.is-valid classes to show validation states.
Server Side Validation
Tooltips
Tooltip validation provides space-efficient feedback using floating messages:
- Compact feedback display
- Non-intrusive validation messages
- Improved form layout preservation
- Enhanced visual hierarchy
Important: Ensure parent elements have
position: relative for proper tooltip positioning.
Tooltip Validation