Styling Validation Errors

The Trongate framework includes a core CSS file named trongate.css. While there is no obligation to include this stylesheet on every page, leveraging it allows you to quickly build responsive, professional-looking webpages that handle form states out of the box.

How Form Validation Errors Are Rendered

When working with Trongate, there are two primary ways that form validation errors are rendered:

1. Summary validation errors (standard)
2. Inline validation errors

In both instances, validation errors are rendered as unordered lists (using <ul> tags), with individual error messages appearing as list items (using <li> tags).

1. Summary Validation Errors

Summary errors are typically positioned above the form or near the top of the page. In this mode, all validation messages are grouped into a single list, providing the user with a comprehensive overview of what needs to be corrected.

Below is an example of the HTML source code generated for a summary error display:

2. Inline Validation Errors

With inline validation, error messages are displayed directly adjacent to the specific form field that failed validation. This provides immediate context to the user. Additionally, Trongate automatically applies the form-field-validation-error class to the invalid input or textarea, and adds a shake class to the opening <form> tag to grab the user's attention.

Here is the typical source code rendered for inline validation:

Customizing the Appearance

Both summary and inline error lists share a base class of validation-errors, which handles the general layout, borders, and colors. Specific modifiers are then added depending on the error type:

• .validation-errors: The base class applied to all error <ul> elements.
• .validation-errors--summary: Added when errors are grouped at the top of the form.
• .validation-errors--inline: Added when errors are placed next to specific fields.
• .form-field-validation-error: Added directly to <input> or <textarea> elements that have failed validation.

The Default CSS

By default, trongate.css uses CSS variables and animations to highlight issues. Here are the core rules that govern the look and feel of validation errors:

Practical Examples: Customizing List Markers

One of the easiest ways to change the "vibe" of your validation errors is by tweaking the list markers. By targeting the .validation-errors--inline class, you can quickly move away from the default look. Here are a few ways to style your error lists using simple CSS:

Minimalist (No Markers)

A clean, modern look that relies purely on text and color contrast.

Professional Square

A square marker often feels more like a "UI component" than a document list. This is a great choice for admin panels.

Modern Dash Style

Using the ::marker pseudo-element, you can replace standard bullets with a clean dash.

Numbered Errors (Decimal)

Useful if multiple validation rules per field are common, helping the user address them sequentially.

Using Icons and Symbols

Sometimes a standard bullet point doesn't convey enough urgency. You can use CSS to replace list markers with symbols or emojis to give your validation errors more visual impact.

1. The "Warning" Emoji

Using a standard ::marker is the most modern way to inject an emoji into your error list.

2. The "Error" Cross

A simple "X" symbol is a universal indicator that something needs to be fixed. It works perfectly with the default red theme.

3. The "Action" Pointer

Guide the user's eye directly to the input field with a pointer emoji.

4. Custom "Check" (For success states)

If you've created a custom .validation-success class for valid fields, you can use a green checkmark.

Advanced: Using Pseudo-elements for Precision

If you need more control over positioning, use the ::before pseudo-element. This allows the icon to be styled independently of the text.

Improving Readability with Spacing

When using large icons, emojis, or multi-line error messages, the list items can sometimes appear crowded. You can use the margin-top property on the li elements to create "breathing room" between each error.

Adding Vertical Spacing

This approach is particularly helpful when using emojis like ⚠️ or ❌, as it prevents the icons from overlapping or feeling too tight.

Adjusting Line Height

If your error messages are long and wrap onto multiple lines, increasing the line-height can also make the text much easier to scan.

Note: In the example above, we targeted .validation-errors li. This will apply the spacing to both summary and inline validation lists, ensuring a consistent look across your entire application.