Settings

Sidebar
Display
Profile Panel
👤

John Doe

Administrator
  • 📊 Dashboard
  • 📝 Forms
  • 📋 Tables
Commands
🚀
Go to Page
Navigate to a page
/go
🌓
Toggle Theme
Switch between light and dark mode
/theme
📐
Toggle Sidebar
Show or hide the sidebar
/sidebar
⚙️
Open Settings
Open the settings panel
/settings
Search In
📄
Pages
Search pages
:p
🧩
Components
Search component pages
:c
↑↓ Navigate
↵ Select
Tab Complete
Esc Close

Different UI patterns for displaying form validation errors. Choose the pattern that best fits your UX requirements.

1. Inline Field Errors

The most common pattern. Error messages appear directly below each field. Best for forms where users need immediate field-level feedback.

Please enter a valid email address
Password must be at least 8 characters
Username is available
Consider adding country code for international format
Usage: Add pa-form-group--error to the form group and pa-form-help--error to the help text.

2. Summary Block (Top of Form)

All errors collected in a single alert at the top. Good for accessibility and giving users a quick overview of all issues.

Best Practice: Combine summary isBlock with isInline errors for maximum accessibility. Screen readers can announce all errors at once.

3. Combined: Summary + Inline (Recommended)

The best of both worlds. Summary for overview, isInline for specific guidance. Most accessible approach.

Invalid card number format. Please use 16 digits.
Valid
Must be 3 or 4 digits
Tip: Make summary items clickable links that jump to the relevant field using anchor IDs.

4. Border + Icon Only (Minimal)

Space-efficient but less informative. Red border and icon indicate error without text message. User must infer the issue or hover/click for details.

!
!
✓
Caution: This pattern provides poor accessibility. Consider using tooltips or aria-describedby for screen readers.

5. Right-side Indicators

Error text positioned to the right of the input. Works well in horizontal form layouts with more screen real estate.

Company name is required
Please enter a valid URL (e.g., https://example.com)
✓ Valid selection

6. Helper Text Transforms to Error

Helper text below the field transforms into error text when validation fails. Maintains consistent spacing.

Maximum 100 characters (85/100)
Maximum 100 characters exceeded (142/100)

7. Toast Notifications

Validation errors shown as toast notifications. Best for submit-level errors or async validation (e.g., server-side checks).

Toast preview (normally appears in corner):

Validation Failed
Invalid credentials. Please check your email and password.
Note: Toasts are ephemeral. Don't use them as the only validation feedback - users may miss them.

8. Validation Timing Strategies

When to trigger validation affects user experience significantly. Try each approach below.

On Input (Real-time)

Validates on every keystroke. Can feel aggressive.

On Blur (Recommended)

Validates when field loses focus. Good balance.

On Submit

All errors shown at once on submit. Traditional approach.

9. Multi-field / Cross-field Validation

When validation depends on multiple fields (e.g., password confirmation, date ranges).

Strong password
Passwords do not match

10. Progressive Validation (Multi-step Forms)

Validate each step before allowing progression. Prevents users from reaching the end with invalid data.

1

Account

2

Profile

3

Confirm

Display name is required
Valid URL

CSS Classes Reference

Form Group States

  • pa-form-group--success - Success state (green)
  • pa-form-group--warning - Warning state (yellow/orange)
  • pa-form-group--error - Error state (red)

Input States

  • pa-input--success - Success border on input
  • pa-input--warning - Warning border on input
  • pa-input--error - Error border on input

Help/Message Text

  • pa-form-help - Base help text styling
  • pa-form-help--success - Green help text
  • pa-form-help--warning - Yellow/orange help text
  • pa-form-help--error - Red help text

Alert Variants (for Summary Blocks)

  • pa-alert pa-alert--danger - Error summary block
  • pa-alert pa-alert--warning - Warning summary block
  • pa-alert pa-alert--success - Success message block
  • pa-alert pa-alert--info - Info message block

Text Utility Classes

  • text-danger - Red text color
  • text-warning - Yellow/orange text color
  • text-success - Green text color
  • text-muted - Muted/gray text color
Validation Failed
Invalid credentials. Please check your email and password.

© 2025 Svelte Pure Admin - Powered by @keenmate/pure-admin-core

App version: 1.8.0

Keyboard Shortcuts

No shortcuts registered.