Форма на Bulma

Если ваша вёрстка реализована на фреймворке Bulma, то разметка скорее всего выглядит таким образом:

<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>

Для подготовки вам необходимо сделать следующее:

1. Добавить атрибуты data-error="*" для элементов которые будут отображены с текстом ошибки.
2. Для совместимости работы с FormIt нужно указать плейсхолдеры со значениями и ошибками.
3. В Bulma невалидный статус указывается классом is-danger, поэтому вам необходимо в системной настройке fetchit.frontend.input.invalid.class указать её.

Важно

Валидаторы разметки до сих пор ругаются на пустой атрибут action, поэтому в нём необходимо указывать ссылку на страницу.

<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>