Форма на Cirrus CSS

В Cirrus CSS невалидное состояние нужно указывать двумя классами: input-error и text-danger, FetchIt учитывает и такие случаи.

<form>
  <div class="row">
    <div class="col-12">
      <label>Name</label>
      <input type="text" name="name" value="">
      <small class="text-danger"></small>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label>Email</label>
      <input type="email" name="email" value="">
      <small class="text-danger"></small>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <input type="submit" class="btn-primary">
      <input type="reset" class="btn-default">
    </div>
  </div>
</form>

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

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

Важно

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

<form>
<form action="[[~[[*id]]]]" method="post">
  <div class="row">
    <div class="col-12">
      <label>Name</label>
      <input type="text" name="name" value="">
      <input type="text" name="name" value="[[+fi.name]]">
      <small class="text-danger"></small>
      <small class="text-danger" data-error="name">[[+fi.error.name]]</small>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label>Email</label>
      <input type="email" name="email" value="">
      <input type="email" name="email" value="[[+fi.email]]">
      <small class="text-danger"></small>
      <small class="text-danger" data-error="email">[[+fi.error.email]]</small>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <input type="submit" class="btn-primary">
      <input type="reset" class="btn-default">
    </div>
  </div>
</form>