Форма на UIkit

В данном примере будем разбирать типовую форму на UIkit:

<form>
  <fieldset class="uk-fieldset">
    <legend class="uk-legend">Legend</legend>
    <div class="uk-margin">
      <label class="uk-form-label" for="name">Name</label>
      <div class="uk-form-controls">
        <input class="uk-input" id="name" name="name" type="text">
      </div>
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="email">Email</label>
      <div class="uk-form-controls">
        <input class="uk-input" id="email" name="email" type="text">
      </div>
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="message">Message</label>
      <div class="uk-form-controls">
        <textarea class="uk-textarea" id="message" name="message" rows="5"></textarea>
      </div>
    </div>
    <div class="uk-margin">
      <button class="uk-button uk-button-primary">Submit</button>
    </div>
  </fieldset>
</form>

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

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

Важно

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

<form> 
<form action="[[~[[*id]]]]" method="post"> 
  <fieldset class="uk-fieldset">
    <legend class="uk-legend">Form legend</legend>
    <div class="uk-margin">
      <label class="uk-form-label" for="name">Name</label>
      <div class="uk-form-controls">
        <input class="uk-input" id="name" name="name" type="text"> 
        <input class="uk-input" id="name" name="name" type="text" value="[[+fi.name]]"> 
        <span class="uk-text-danger" data-error="name">[[+fi.error.name]]</span> 
      </div>
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="email">Email</label>
      <div class="uk-form-controls">
        <input class="uk-input" id="email" name="email" type="text"> 
        <input class="uk-input" id="email" name="email" type="text" value="[[+fi.email]]"> 
        <span class="uk-text-danger" data-error="email">[[+fi.error.name]]</span> 
      </div>
    </div>
    <div class="uk-margin">
      <label class="uk-form-label" for="message">Message</label>
      <div class="uk-form-controls">
        <textarea class="uk-textarea" id="message" name="message" rows="5"></textarea> 
        <textarea class="uk-textarea" id="message" name="message" rows="5">[[+fi.message]]</textarea> 
        <span class="uk-text-danger" data-error="message">[[+fi.error.message]]</span> 
      </div>
    </div>
    <div class="uk-margin">
      <button class="uk-button uk-button-primary">Submit</button>
    </div>
  </fieldset>
</form>