
FetchIt
Легковесная AJAX-отправка форм в MODX на Fetch API поверх FormIt или своего сниппета


Пример на turretcss:
<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>Что сделать:
data-error для текста ошибки.[data-success] и [data-validation-error] для AJAX.fetchit.frontend.input.invalid.class указать error.Информация
В action укажите URL страницы.
<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><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>