Form Validations - Pure Admin Visual

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

Email Address * Please enter a valid email address

Password * Password must be at least 8 characters

Username * Username is available

Phone Number 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.

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

Please fix the following errors:

First name is required
Email address is not valid
Password must contain at least one uppercase letter
Please accept the terms and conditions

First Name *

Last Name

Email *

Password *

I accept the terms and conditions *

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

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

Tip: Make summary items clickable links that jump to the relevant field using anchor IDs.

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.

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

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

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.

When to trigger validation affects user experience significantly.

Email Email incomplete

Validates as user types. Can feel aggressive.

Email Invalid email format

Validates when field loses focus. Good balance.

Email

All errors shown at once on submit. Traditional approach.

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

New Password Strong password

Confirm Password Passwords do not match

Start Date

End Date

End date must be after start date

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

1

Account

2

Profile

3

Confirm

Please complete all required fields in Step 2 before proceeding.

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

New task assigned

Build completed

Server maintenance

New comment

1. Inline Field Errors

2. Summary Block (Top of Form)

3. Combined: Summary + Inline (Recommended)

4. Border + Icon Only (Minimal)

5. Right-side Indicators

6. Helper Text Transforms to Error

7. Toast Notifications

8. Validation Timing Strategies

On Input (Real-time)

On Blur (Recommended)

On Submit

9. Multi-field / Cross-field Validation

10. Progressive Validation (Multi-step Forms)

CSS Classes Reference