Форма на Vanilla

В Vanilla Framework, как и в Fomantic UI, класс ошибки вешают на родителя. Для этого есть [data-custom]. Поля ввода по правилам Vanilla оборачивают в элемент с классом 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. Добавить [data-success] и [data-validation-error] для AJAX-сообщений формы.
4. Проставить плейсхолдеры FormIt.

Информация

Валидаторы разметки ругаются на пустой action. Укажите ссылку на страницу.

modx

<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>
  <div role="alert" data-success style="display: none;"></div> 
  <div role="alert" data-validation-error style="display: none;"></div> 
  <button type="submit" class="p-button--positive">Submit</button>
  <button type="reset" class="p-button">Reset</button>
</form>

fenom

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