FetchIt
Легковесный компонент для обработки и отправки форм с помощью Fetch API
Пример с CSS фреймворком Fomantic-UI интереснее, потому что CSS класс невалидности нужно добавлять родительскому элементу, а не полю ввода. Именно для таких случаев есть настройка frontend.custom.invalid.class
:
<form class="ui form">
<div class="field">
<label>Name</label>
<input type="text" name="name">
<span class="ui error text"></span>
</div>
<div class="field">
<label>Email</label>
<input type="text" name="email">
<span class="ui error text"></span>
</div>
<button class="ui button" type="submit">Submit</button>
<button class="ui button" type="reset">Reset</button>
</form>
Для подготовки вам необходимо сделать следующее:
data-custom="*"
для родительских элементов и указав в системной настройке fetchit.frontend.custom.invalid.class
значение error
.data-error="*"
для элементов которые будут отображены с текстом ошибки.Важно
Валидаторы разметки до сих пор ругаются на пустой атрибут action
, поэтому в нём необходимо указывать ссылку на страницу.
<form class="ui form">
<form action="[[~[[*id]]]]" class="ui form">
<div class="field">
<div class="field" data-custom="name">
<label>Name</label>
<input type="text" name="name">
<input type="text" name="name" value="[[+fi.name]]">
<span class="ui error text"></span>
<span data-error="name" class="ui error text">[[+fi.error.name]]</span>
</div>
<div class="field">
<div class="field" data-custom="email">
<label>Email</label>
<input type="text" name="email">
<input type="text" name="email" value="[[+fi.email]]">
<span class="ui error text"></span>
<span data-error="email" class="ui error text">[[+fi.error.email]]</span>
</div>
<button class="ui button" type="submit">Submit</button>
<button class="ui button" type="reset">Reset</button>
</form>
<form action="[[~[[*id]]]]" class="ui form">
<div class="field" data-custom="name">
<label>Name</label>
<input type="text" name="name" value="[[+fi.name]]">
<span data-error="name" class="ui error text">[[+fi.error.name]]</span>
</div>
<div class="field" data-custom="email">
<label>Email</label>
<input type="text" name="email" value="[[+fi.email]]">
<span data-error="email" class="ui error text">[[+fi.error.email]]</span>
</div>
<button class="ui button" type="submit">Submit</button>
<button class="ui button" type="reset">Reset</button>
</form>