Skip to content
  1. Компоненты
  2. FetchIt
  3. Разметка форм
  4. Форма на turretcss

Форма на turretcss

Пример на turretcss:

html
<form>
  <p class="field">
    <label>Name</label>
    <input type="text" name="name" value="" />
    <p class="form-message error"></p>
  </p>
  <p class="field">
    <label>Email</label>
    <input type="email" name="email" value="" />
    <p class="form-message error"></p>
  </p>
  <p class="field">
    <button type="submit" class="button">Submit</button>
    <button type="reset" class="button">Reset</button>
  </p>
</form>

Что сделать:

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

Информация

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

modx
<form> 
<form action="[[~[[*id]]]]" method="post"> 
  <p class="field">
    <label>Name</label>
    <input type="text" name="name" value="" /> 
    <input type="text" name="name" value="[[+fi.name]]" /> 
    <p class="form-message error"></p> 
    <p class="form-message error" data-error="name">[[+fi.error.name]]</p> 
  </p>
  <p class="field">
    <label>Email</label>
    <input type="email" name="email" value="" /> 
    <input type="email" name="email" value="[[+fi.email]]" /> 
    <p class="form-message error"></p> 
    <p class="form-message error" data-error="email">[[+fi.error.email]]</p> 
  </p>
  <div role="alert" data-success style="display: none;"></div> 
  <div role="alert" data-validation-error style="display: none;"></div> 
  <p class="field">
    <button type="submit" class="button">Submit</button>
    <button type="reset" class="button">Reset</button>
  </p>
</form>
fenom
<form> 
<form action="{$_modx->resource.id | url}" method="post"> 
  <p class="field">
    <label>Name</label>
    <input type="text" name="name" value="" /> 
    <input type="text" name="name" value="{$_modx->getPlaceholder('fi.name')}" /> 
    <p class="form-message error"></p> 
    <p class="form-message error" data-error="name">{$_modx->getPlaceholder('fi.error.name')}</p> 
  </p>
  <p class="field">
    <label>Email</label>
    <input type="email" name="email" value="" /> 
    <input type="email" name="email" value="{$_modx->getPlaceholder('fi.email')}" /> 
    <p class="form-message error"></p> 
    <p class="form-message error" data-error="email">{$_modx->getPlaceholder('fi.error.email')}</p> 
  </p>
  <div role="alert" data-success style="display: none;"></div> 
  <div role="alert" data-validation-error style="display: none;"></div> 
  <p class="field">
    <button type="submit" class="button">Submit</button>
    <button type="reset" class="button">Reset</button>
  </p>
</form>