Automatic Error Setup

Setup errors on the fly — no attributes.

Superform now intelligently detects and manages automatically error messages related to form inputs, enhancing accuracy and user experience without the need for extensive manual setup.

Overview & Setup

Automatic Error Element - no attributes!

Superform automatically recognizes error-related keywords ("error," "invalid," "fail") in class names within any of the two siblings below and one sibling above an input field. It will hide and show these errors automatically.

This feature ensures error messages are correctly associated with the relevant inputs, facilitating immediate and accurate setup.

⚠️ Smart Error Linking

Error messages placed between two inputs are automatically linked to the nearest preceding input, ensuring precise feedback in dense form layouts.

---

→ For further error customization head to Manual Error Setup.

The Proximity Context

Superform's Proximity Context system automatically detects error messages based on class keywords like "error," "invalid," or "fail" within any of the two siblings below and one sibling above an input field.

It can also toggle sf-error-class on inputs and their parent elements without needing explicit sf-error attributes ( sf-error-class and sf-error are part of the Manual Error Setup — see here).

Key Points:

• Automatic Detection: Manages error messages within two siblings below or one sibling above the input.

• Class Toggling: Automatically toggles error classes on both input fields and their parent elements for enhanced feedback.

When you don't want to use attributes, just use the keywords in error class names.

---

Examples

1. Sibling Error

HTML Example

<input type="text" name="name" required>
<div class="error-message">Name is required</div>

2. Two Sibling Errors

HTML Example

<input type="email" name="email" required>
<span class="error-icon">!</span>
<div class="error-message">Email is required</div>

3. Two and One Sibling Errors

HTML Example

<!-- Error message above the input element -->
<div class="i-am-invalid">!!!!! BE CAREFUL !!!!!!!!!</div>
<!-- Name input field -->
<input type="text" name="name" required>
<!-- Additional error-related sibling elements below the input -->
<span class="error-icon">!</span> <!-- Exclamation mark icon indicating error -->
<div class="error-message">Please enter a valid name.</div> <!-- Specific error message -->

---

CSS Transitions of an Automatic Error

Apply CSS transitions, such as opacity, to create smooth visual effects for a more dynamic and engaging user experience.

Need even more granular control?

For more granular control over errors, such as toggling an extra class on error, or implementing toast notifications, please refer to the Manual Error Setup subpage.