Manual Error Setup
Advanced error handling — and customizable.
Last updated
Was this helpful?
Advanced error handling — and customizable.
Last updated
Was this helpful?
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.
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.
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.
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?!).
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.
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:
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:
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.