Форма на Fomantic-UI

Пример с CSS фреймворком Fomantic-UI интереснее, потому что CSS класс невалидности нужно добавлять родительскому элементу, а не полю ввода. Именно для таких случаев есть настройка frontend.custom.invalid.class:

<form class="ui form">
  <div class="field">
    <label>Name</label>
    <input type="text" name="name">
    <span class="ui error text"></span>
  </div>
  <div class="field">
    <label>Email</label>
    <input type="text" name="email">
    <span class="ui error text"></span>
  </div>
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>

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

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

Важно

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

Изменения

<form class="ui form"> 
<form action="[[~[[*id]]]]" class="ui form"> 
  <div class="field"> 
  <div class="field" data-custom="name"> 
    <label>Name</label>
    <input type="text" name="name"> 
    <input type="text" name="name" value="[[+fi.name]]"> 
    <span class="ui error text"></span> 
    <span data-error="name" class="ui error text">[[+fi.error.name]]</span> 
  </div>
  <div class="field"> 
  <div class="field" data-custom="email"> 
    <label>Email</label>
    <input type="text" name="email"> 
    <input type="text" name="email" value="[[+fi.email]]"> 
    <span class="ui error text"></span> 
    <span data-error="email" class="ui error text">[[+fi.error.email]]</span> 
  </div>
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>

Готовая разметка

<form action="[[~[[*id]]]]" class="ui form">
  <div class="field" data-custom="name">
    <label>Name</label>
    <input type="text" name="name" value="[[+fi.name]]">
    <span data-error="name" class="ui error text">[[+fi.error.name]]</span>
  </div>
  <div class="field" data-custom="email">
    <label>Email</label>
    <input type="text" name="email" value="[[+fi.email]]">
    <span data-error="email" class="ui error text">[[+fi.error.email]]</span>
  </div>
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>