Форма на Pico.css

Pico.css стилизует невалидное поле по aria-invalid. FetchIt ставит этот атрибут сам. Класс invalid в настройке для Pico обычно не нужен.

<form>
  <label>
    Name
    <input type="text" name="name">
  </label>
  <label>
    Email
    <input type="email" name="email">
  </label>
  <button type="submit">Submit</button>
</form>

Что сделать:

1. Добавить элементы с data-error для текста ошибки.
2. Добавить [data-success] и [data-validation-error] для AJAX.
3. Проставить плейсхолдеры FormIt.

Информация

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

modx

<form> 
<form action="[[~[[*id]]]]" method="post"> 
  <label>
    Name
    <input type="text" name="name"> 
    <input type="text" name="name" value="[[+fi.name]]"> 
    <small data-error="name">[[+fi.error.name]]</small> 
  </label>
  <label>
    Email
    <input type="email" name="email"> 
    <input type="email" name="email" value="[[+fi.email]]"> 
    <small data-error="email">[[+fi.error.email]]</small> 
  </label>
  <div role="alert" data-success style="display: none;"></div> 
  <div role="alert" data-validation-error style="display: none;"></div> 
  <button type="submit">Submit</button>
</form>

fenom

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