##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# 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
Loading...
Browser Default Validation
Loading...

## 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
Loading...
Custom Styles Validation
Loading...

## 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
Loading...
Server Side Validation
Loading...

## 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
Loading...
Tooltip Validation
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates