Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page
  • Setup - Error Binding
  • Usage Scenarios
  • Setup - Error Class Toggle
  • Usage Scenarios

Was this helpful?

  1. Input Validation & Errors
  2. Error Management

Manual Error Setup

Advanced error handling — and customizable.

Last updated 10 months ago

Was this helpful?

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 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:

  • 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.

To elevate the visual impact of auto-detected error messages (see ) 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.

🎛️
Automatic Error Element
Automatic Error Setup
Adding an extra class to our sibling error!