Error States

Show validation errors using the if-error directive system. When a field fails validation, SnipForm can show elements, add classes, inject text, and apply styles.

How It Works

The error system uses two parts:

1. if-error="fieldname" - Targets a specific field
2. then-* / else-* - Actions to take when error exists or doesn’t

---

Show Error Messages

Show an element when a field has an error:

<input name="email" sf-validate:required sf-validate:email />

<span if-error="email" then-show style="display:none">
    Please enter a valid email
</span>

Inject the Error Text

Use then-text without a value to inject the validation message from the API:

<input name="email" sf-validate:email="Invalid email format" />

<span if-error="email" then-show then-text style="display:none"></span>

When validation fails, shows “Invalid email format”.

Combined Show + Text

Use then-show-text as a shorthand:

<span if-error="email" then-show-text style="display:none"></span>

Custom Text Override

Provide a value to show custom content instead of the API message:

<span if-error="email" then-show then-text="Check your email address" style="display:none"></span>

---

Add Error Classes

Apply classes when an error exists:

<div if-error="email" then-class="text-red-500 shake-animation">
    <label>Email</label>
    <input name="email" sf-validate:email />
</div>

Input Shorthand

For inputs, use error-class directly (no if-error needed):

<input name="email"
    sf-validate:email
    error-class="border-red-500 bg-red-50" />

---

Add Error Styles

Apply inline styles when an error exists:

<div if-error="email" then-style="border: 2px solid red">
    ...
</div>

Input Shorthand

<input name="email"
    sf-validate:email
    error-style="border: 2px solid red" />

Caution

!important in style values is not supported.

---

Hide on Error

Hide an element when an error exists:

<span if-error="email" then-hide>
    Email looks good!
</span>

---

Else Conditions (When Valid)

Show content when there is NO error:

<div if-error="email">
    <span then-show class="text-red-500">Invalid email</span>
    <span else-text class="text-green-500">Email is valid</span>
</div>

Available else-* attributes:

• else-class - Classes when valid
• else-text - Text when valid
• else-style - Styles when valid

---

Complete Example

<snip-form key="YOUR_KEY">
    <form>
        <div>
            <label>Email</label>
            <input name="email"
                sf-validate:required="Email is required"
                sf-validate:email="Invalid email"
                error-class="border-red-500"
                valid-class="border-green-500" />

            <div if-error="email">
                <span then-show then-text class="text-red-500 text-sm" style="display:none"></span>
                <span else-text class="text-green-500 text-sm">Looks good!</span>
            </div>
        </div>

        <button type="submit">Submit</button>
    </form>
</snip-form>

---

Attribute Reference

Container Attributes

Attribute	Value	Description
if-error	field name	Target field to watch for errors
then-show	-	Show element on error
then-hide	-	Hide element on error
then-class	CSS classes	Add classes on error
then-text	text (optional)	Inject text on error
then-show-text	text (optional)	Show + inject text
then-style	CSS	Add inline styles on error
else-class	CSS classes	Add classes when valid
else-text	text (optional)	Inject text when valid
else-style	CSS	Add inline styles when valid

Input Shorthand Attributes

Attribute	Value	Description
error-class	CSS classes	Add classes on field error
error-style	CSS	Add inline styles on field error
valid-class	CSS classes	Add classes when field valid
valid-style	CSS	Add inline styles when field valid