Форма на Fomantic-UI

В Fomantic-UI класс ошибки вешают на родителя поля, не на input. Для этого есть fetchit.frontend.custom.invalid.class и [data-custom]:

<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 на обёртки .field и в fetchit.frontend.custom.invalid.class указать error.
2. Добавить data-error для текста ошибки.
3. Добавить [data-success] и [data-validation-error] для AJAX.
4. Проставить плейсхолдеры FormIt.

Информация

В action укажите URL страницы.

Изменения

<form class="ui form"> 
<form action="[[~[[*id]]]]" method="post" 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>
  <div class="ui positive message" role="alert" data-success style="display: none;"></div> 
  <div class="ui negative message" role="alert" data-validation-error style="display: none;"></div> 
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>

Изменения

<form class="ui form"> 
<form action="{$_modx->resource.id | url}" method="post" 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="{$_modx->getPlaceholder('fi.name')}"> 
    <span class="ui error text"></span> 
    <span data-error="name" class="ui error text">{$_modx->getPlaceholder('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="{$_modx->getPlaceholder('fi.email')}"> 
    <span class="ui error text"></span> 
    <span data-error="email" class="ui error text">{$_modx->getPlaceholder('fi.error.email')}</span> 
  </div>
  <div class="ui positive message" role="alert" data-success style="display: none;"></div> 
  <div class="ui negative message" role="alert" data-validation-error style="display: none;"></div> 
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>

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

<form action="[[~[[*id]]]]" method="post" 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>
  <div class="ui positive message" role="alert" data-success style="display: none;"></div>
  <div class="ui negative message" role="alert" data-validation-error style="display: none;"></div>
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>

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

<form action="{$_modx->resource.id | url}" method="post" class="ui form">
  <div class="field" data-custom="name">
    <label>Name</label>
    <input type="text" name="name" value="{$_modx->getPlaceholder('fi.name')}">
    <span data-error="name" class="ui error text">{$_modx->getPlaceholder('fi.error.name')}</span>
  </div>
  <div class="field" data-custom="email">
    <label>Email</label>
    <input type="text" name="email" value="{$_modx->getPlaceholder('fi.email')}">
    <span data-error="email" class="ui error text">{$_modx->getPlaceholder('fi.error.email')}</span>
  </div>
  <div class="ui positive message" role="alert" data-success style="display: none;"></div>
  <div class="ui negative message" role="alert" data-validation-error style="display: none;"></div>
  <button class="ui button" type="submit">Submit</button>
  <button class="ui button" type="reset">Reset</button>
</form>