Skip to content
SnipForm Docs

Valid States

In some cases, you may want to display a different state if and only if the field is valid.

Basic Usage

Section titled “Basic Usage”

Like the Error state, there are three components:

  1. field - The target field that triggers the directive if there is no error
  2. option - Four options available:
    • show - Show the element if there is no error
    • text - Inject text if there is no error
    • class - Add a class if there is no error
    • style - Add a style if there is no error
  3. value - The value of the option if applicable

Three Formats

Section titled “Three Formats”

Readability Format

Section titled “Readability Format”

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

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

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

Namespaced Format

Section titled “Namespaced Format”

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

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

Read as: “Valid class for email = my-valid-class”

Shorthand Format

Section titled “Shorthand Format”

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

<input ~email:class="my-valid-class" />

The ~ (tilde) represents OK/valid.

Readability Format Examples

Section titled “Readability Format Examples”
<!-- API -->
<div
  if-email-valid-show
  if-email-valid-text="Literal text"
  if-email-valid-class="my-valid-class text-green-500"
  if-email-valid-style="border: 1px solid green"
/>


<!-- Combined show and text -->
<div if-email-valid-show-text="Please use your company email address" />
<!-- Show this element -->
<p if-email-valid-show>Email looks good!</p>


<!-- Show the valid class -->
<input type="email" name="email"
    sf-validate:email
    if-email-valid-class="valid-class">


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

Namespaced Format Examples

Section titled “Namespaced Format Examples”
<!-- API -->
<div
  valid-show:email
  valid-text:email="Literal text"
  valid-class:email="my-valid-class text-green-500"
  valid-style:email="border: 1px solid green"
/>


<!-- Combined -->
<div valid-show-text:email="Please use your company email address" />

Shorthand Format Examples

Section titled “Shorthand Format Examples”
<!-- API -->
<div
  ~email:show
  ~email:text="Literal text"
  ~email:class="my-valid-class text-green-500"
  ~email:style="border: 1px solid green"
/>


<!-- Combined -->
<div ~email:show-text="Literal text" />

Note on Field Names

Section titled “Note on Field Names”

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

<div if-first_name-valid-show />
<div valid-show:first_name />
<div ~first_name:show />