Form with Bulma

If your layout uses the framework Bulma, the markup likely looks like this:

<form>
  <div class="field">
    <label class="label">Username</label>
    <div class="control">
      <input class="input" type="text" name="name" value="">
    </div>
    <p class="help is-danger"></p>
  </div>

  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" name="email" value="">
    </div>
    <p class="help is-danger"></p>
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button type="submit" class="button is-link">Submit</button>
    </div>
    <div class="control">
      <button type="reset" class="button is-link is-light">Cancel</button>
    </div>
  </div>
</form>

To set it up:

1. Add the data-error="*" to elements that will display error text.
2. For FormIt compatibility add placeholders for values and errors.
3. In Bulma the invalid state uses the class is-danger, so set system setting fetchit.frontend.input.invalid.class to it.

Important

Markup validators complain about an empty action, so set the page URL there.

<form> 
<form action="[[~[[*id]]]]" method="post"> 
  <div class="field">
    <label class="label">Username</label>
    <div class="control">
      <input class="input" type="text" name="name" value=""> 
      <input class="input" type="text" name="name" value="[[+fi.name]]"> 
    </div>
    <p class="help is-danger"></p> 
    <p class="help is-danger" data-error="name">[[+fi.error.name]]</p> 
  </div>

  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" name="email" value=""> 
      <input class="input" type="email" name="email" value="[[+fi.email]]"> 
    </div>
    <p class="help is-danger"></p> 
    <p class="help is-danger" data-error="email">[[+fi.error.email]]</p> 
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button type="submit" class="button is-link">Submit</button>
    </div>
    <div class="control">
      <button type="reset" class="button is-link is-light">Cancel</button>
    </div>
  </div>
</form>