Error States

The SnipForm engine has error states built in to help guide your users. Errors are returned when validation rules are not met.

Basic Usage

There are three components to an error state directive:

field - The target field that triggers the directive
option - Four options available:
- show - Show the element if there is an error
- text - Inject the error text into the element
- class - Add a class if there is an error
- style - Add a style if there is an error
value - The value of the option if applicable

Three Formats

Readability Format

The easiest to read and remember, most verbose.

Format: if-{field}-error-{option}="VALUE"

<input if-email-error-class="my-error-class" />

Read as: “If email error then class = my-error-class”

Namespaced Format

Quick to write and easy to understand.

Format: error-{option}:{field}="VALUE"

<input error-class:email="my-error-class" />

Read as: “Error class for email = my-error-class”

Shorthand Format

Quickest to write.

Format: !{field}:{option}="VALUE"

<input !email:class="my-error-class" />

The ! (bang) operator is synonymous with NOT.

Readability Format Examples

<!-- API -->
<div
  if-email-error-show
  if-email-error-text
  if-email-error-text="Literal text to be injected"
  if-email-error-class="my-error-class text-red-500"
  if-email-error-style="border: 1px solid red"
/>

<!-- Combined show and text -->
<div if-email-error-show-text />

<!-- Show this element -->
<p if-email-error-show>There was an error</p>

<!-- Show and inject error text -->
<p if-email-error-show-text></p>

<!-- Show with literal text -->
<p if-email-error-show>This text will show no matter what the error says</p>

<!-- Add error class -->
<input type="email" name="email"
    sf-validate:email
    if-email-error-class="error-class">

<!-- Add error style -->
<input type="email" name="email"
    sf-validate:email
    if-email-error-style="border:2px solid red">

Namespaced Format Examples

<!-- API -->
<div
  error-show:email
  error-text:email
  error-text:email="Literal text"
  error-class:email="my-error-class"
  error-style:email="border: 1px solid red"
/>

<!-- Combined -->
<div error-show-text:email />

Shorthand Format Examples

<!-- API -->
<div
  !email:show
  !email:text
  !email:text="Literal text"
  !email:class="my-error-class"
  !email:style="border: 1px solid red"
/>

<!-- Combined -->
<div !email:show-text />

If Any Error

Show an error if any field is invalid:

<!-- Readability format, omit the field -->
<section if-error-show>
    There were errors!
</section>

<!-- Namespace format, omit the field -->
<section error-show:>
   There were errors!
</section>

<!-- Shorthand format, use [any] as field -->
<section ![any]:show>
    There were errors!
</section>

Note on Field Names

If your field name has more than one word, use underscores:

<div if-first_name-error-show />
<div error-show:first_name />
<div !first_name:show />