`fs-trigger`

Control when assertions are created with implicit or explicit actions

Triggers are the implicit or explicit actions that define when Fault Sense should create assertions. Each HTML element can have exactly one trigger.

Triggers follow the form fs-trigger="<trigger>" where <trigger> is one of the supported event types. When the specified event occurs, Fault Sense parses the remaining attributes on the element and creates a new pending assertion.

mount

Fires when this HTML element is added to the DOM. This is useful for validating that critical UI elements render correctly on page load.

<div fs-trigger="mount">
  <!-- Your content -->
</div>

unmount

Fires when this HTML element is removed from the DOM.

<div fs-trigger="unmount">
  <!-- Your content -->
</div>

load

Fires when an element's resource (img, video, iframe) completes loading or encounters an error. Essential for validating that media assets load correctly.

<img fs-trigger="load" src="/path/to/image.jpg" alt="Description" />

<video fs-trigger="load" src="/path/to/video.mp4"></video>

<iframe fs-trigger="load" src="/embed/content"></iframe>

click

Fires when the element is clicked. The most common trigger for buttons, links, and interactive elements.

<button fs-trigger="click">
  Click Me
</button>

<a href="/page" fs-trigger="click">
  Link Text
</a>

change

Fires when an input element's value changes.

<input type="text" fs-trigger="change" />

<select fs-trigger="change">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<input type="checkbox" fs-trigger="change" />

blur

Fires when an input element loses focus.

<input type="email" fs-trigger="blur" />

<textarea fs-trigger="blur"></textarea>

submit

Used on form elements when the form is submitted.

<form fs-trigger="submit">
  <input name="email" type="email" />
  <button type="submit">Submit</button>
</form>

Best Practices

Follow these guidelines to get the most out of triggers in your Fault Sense implementation.

<!-- ✅ Good: One trigger per element -->
<button fs-trigger="click">Submit</button>

<!-- ❌ Bad: Multiple triggers (not supported) -->
<button fs-trigger="click mouseenter">Submit</button>

<!-- ✅ Good: Use with other Fault Sense attributes -->
<button fs-trigger="click" fs-assert-visible="#modal">
  Show Modal
</button>

fs-trigger