Форма на Cirrus CSS

В Cirrus CSS невалидному полю нужны два класса: input-error и text-danger. В fetchit.frontend.input.invalid.class укажите оба через пробел.

<form>
  <div class="row">
    <div class="col-12">
      <label>Name</label>
      <input type="text" name="name" value="">
      <small class="text-danger"></small>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label>Email</label>
      <input type="email" name="email" value="">
      <small class="text-danger"></small>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <input type="submit" class="btn-primary">
      <input type="reset" class="btn-default">
    </div>
  </div>
</form>

Что сделать:

1. Добавить data-error для текста ошибки.
2. Добавить [data-success] и [data-validation-error] для AJAX.
3. Проставить плейсхолдеры FormIt.
4. В fetchit.frontend.input.invalid.class указать input-error text-danger.

Информация

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

modx

<form> 
<form action="[[~[[*id]]]]" method="post"> 
  <div class="row">
    <div class="col-12">
      <label>Name</label>
      <input type="text" name="name" value=""> 
      <input type="text" name="name" value="[[+fi.name]]"> 
      <small class="text-danger"></small> 
      <small class="text-danger" data-error="name">[[+fi.error.name]]</small> 
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label>Email</label>
      <input type="email" name="email" value=""> 
      <input type="email" name="email" value="[[+fi.email]]"> 
      <small class="text-danger"></small> 
      <small class="text-danger" data-error="email">[[+fi.error.email]]</small> 
    </div>
  </div>
  <div class="row"> 
    <div class="col-12"> 
      <div class="toast toast--success" role="alert" data-success style="display: none;"></div> 
      <div class="toast toast--error" role="alert" data-validation-error style="display: none;"></div> 
    </div> 
  </div> 
  <div class="row">
    <div class="col-12">
      <input type="submit" class="btn-primary">
      <input type="reset" class="btn-default">
    </div>
  </div>
</form>

fenom

<form> 
<form action="{$_modx->resource.id | url}" method="post"> 
  <div class="row">
    <div class="col-12">
      <label>Name</label>
      <input type="text" name="name" value=""> 
      <input type="text" name="name" value="{$_modx->getPlaceholder('fi.name')}"> 
      <small class="text-danger"></small> 
      <small class="text-danger" data-error="name">{$_modx->getPlaceholder('fi.error.name')}</small> 
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <label>Email</label>
      <input type="email" name="email" value=""> 
      <input type="email" name="email" value="{$_modx->getPlaceholder('fi.email')}"> 
      <small class="text-danger"></small> 
      <small class="text-danger" data-error="email">{$_modx->getPlaceholder('fi.error.email')}</small> 
    </div>
  </div>
  <div class="row"> 
    <div class="col-12"> 
      <div class="toast toast--success" role="alert" data-success style="display: none;"></div> 
      <div class="toast toast--error" role="alert" data-validation-error style="display: none;"></div> 
    </div> 
  </div> 
  <div class="row">
    <div class="col-12">
      <input type="submit" class="btn-primary">
      <input type="reset" class="btn-default">
    </div>
  </div>
</form>