Форма на Vanilla

В фреймворке Vanilla также как и в Fomantic UI нужно добавлять класс невалидности родительскому элементу, но это не проблема, мы можем воспользоваться селекторами data-custom="*" и добавим их. Еще нужно учитывать, что в рамках правил фреймворка, валидируемые поля ввода должны быть обёрнуты в элемент с классом p-form-validation:

<form>
  <div class="p-form-validation">
    <label>Name</label>
    <input class="p-form-validation__input" type="text" name="name" value="">
    <p class="p-form-validation__message"></p>
  </div>
  <div class="p-form-validation" data-custom="email">
    <label>Email</label>
    <input class="p-form-validation__input" type="email" name="email" value="">
    <p class="p-form-validation__message"></p>
  </div>
  <button type="submit" class="p-button--positive">Submit</button>
  <button type="reset" class="p-button">Reset</button>
</form>

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

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

Важно

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

<form>
<form action="[[~[[*id]]]]" method="post">
  <div class="p-form-validation">
  <div class="p-form-validation" data-custom="name">
    <label>Name</label>
    <input class="p-form-validation__input" type="text" name="name" value="">
    <input class="p-form-validation__input" type="text" name="name" value="[[+fi.name]]">
    <p class="p-form-validation__message"></p>
    <p class="p-form-validation__message" data-error="name">[[+fi.error.name]]</p>
  </div>
  <div class="p-form-validation">
  <div class="p-form-validation" data-custom="email">
    <label>Email</label>
    <input class="p-form-validation__input" type="email" name="email" value="">
    <input class="p-form-validation__input" type="email" name="email" value="[[+fi.email]]">
    <p class="p-form-validation__message"></p>
    <p class="p-form-validation__message" data-error="email">[[+fi.error.email]]</p>
  </div>
  <button type="submit" class="p-button--positive">Submit</button>
  <button type="reset" class="p-button">Reset</button>
</form>