✨ Clonables
Social
Resources
Superform Home

Manual Error Setup

Advanced error handling — and customizable.

I need more customization

When automatic error handling doesn't meet your specific needs for placement and styling of error messages, manual setup using sf-error and/or sf-error-class provides the flexibility to precisely control the positioning and dynamic appearance of error elements.

Class-agnostic setup

We don't require specific class names. Write and import your own.

Setup - Error Binding

Attribute: sf-error = inputFieldName

Usage: Explicitly links an error message container to an input field.

Essential when the error element is not an Automatic Error Element to the input or for even more customized error handling (read below).

Used for: no Automatic Errors, toast errors.

Usage Scenarios

1. An error element with a custom class ex:text-size-small (no "error", "invalid, "fail" keywords).

The sf-error attribute is required here to manually link the error message with the input field because the error message is in the Sibling Context but the class does not contain any of the "error", "invalid", or "fail" keywords. 

// HTML Example
<!-- Input field with an error message not as a direct sibling -->
<input type="email" name="userEmail" sf-error="userEmail">
<div class="info">Please check your email for verification</div>
<div class="text-size-small" sf-error="userEmail">Invalid email address</div>

2. Toast notification

For cases requiring broader flexibility, such as displaying toast notifications for errors anywhere in a form, Superform needs also manual error binding with sf-error attribute.

Setup - Error Class Toggle

Attribute: sf-error-class = className

Usage: Toggle CSS classes based on the validation state.

Requires sf-error when element is out of Proximity Context (link?!).

Usage Scenarios

1. Beyond hide/show of an Automatic Error:

To elevate the visual impact of auto-detected error messages (see Automatic Error Setup) beyond basic show/hide functionality, assign an additional class using sf-error-class. This enriches the error feedback without needing sf-error, as the proximity detection automatically identifies elements containing "error" in the class name.

  • Situation: The error element is automatically detected within the sibling context (Automatic Error Element).

  • Implementation: Apply sf-error-class="classname" to toggle an additional class for greater visual impact. No sf-error attribute is needed as the error relationship is established by proximity.

2. Styling Input and its Parent:

  • Situation: To style the input and/or its parent element when an error occurs.

  • Implementation: Use sf-error-class on the input and/or the parent element to apply a class upon error validation, without needing to set sf-error.

  • HTML Example:

    <div class="input-group" sf-error-class="red-background">
  <input type="text" name="username" sf-error-class="red-border">
  <div class="error-message">Username is required</div>
</div>

3. Customizing Errors Outside of Proximity Context:

  • Situation: When errors need to be managed outside the immediate context of the input or when specific error handling is required across different elements.

  • Implementation: Combine sf-error="fieldName" with sf-error-class="classname" to link error messages and toggle classes where the error elements are not direct siblings or are located dynamically.

  • HTML Example:

    <input type="text" name="address" sf-error="addressError" sf-error-class="error-highlight">
<div id="addressError" class="custom-error-location">Please provide a valid addres

Pro Tip

Leverage Automatic Detection: Where possible, use the automatic detection capabilities of Superform to minimize manual configurations and streamline error handling.

Maintain Visual Consistency: Ensure that the toggled classes align with your overall form design to maintain a seamless and professional appearance.

Last updated