FetchIt
Легковесный компонент для обработки и отправки форм с помощью Fetch API
В данном примере будем разбирать типовую форму на UIkit:
<form>
<fieldset class="uk-fieldset">
<legend class="uk-legend">Legend</legend>
<div class="uk-margin">
<label class="uk-form-label" for="name">Name</label>
<div class="uk-form-controls">
<input class="uk-input" id="name" name="name" type="text">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="email">Email</label>
<div class="uk-form-controls">
<input class="uk-input" id="email" name="email" type="text">
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="message">Message</label>
<div class="uk-form-controls">
<textarea class="uk-textarea" id="message" name="message" rows="5"></textarea>
</div>
</div>
<div class="uk-margin">
<button class="uk-button uk-button-primary">Submit</button>
</div>
</fieldset>
</form>
Для подготовки вам необходимо сделать следующее:
data-error="*"
для элементов которые будут отображены с текстом ошибки.uk-form-danger
, поэтому вам необходимо в системной настройке fetchit.frontend.input.invalid.class
указать её.Важно
Валидаторы разметки до сих пор ругаются на пустой атрибут action
, поэтому в нём необходимо указывать ссылку на страницу.
<form>
<form action="[[~[[*id]]]]" method="post">
<fieldset class="uk-fieldset">
<legend class="uk-legend">Form legend</legend>
<div class="uk-margin">
<label class="uk-form-label" for="name">Name</label>
<div class="uk-form-controls">
<input class="uk-input" id="name" name="name" type="text">
<input class="uk-input" id="name" name="name" type="text" value="[[+fi.name]]">
<span class="uk-text-danger" data-error="name">[[+fi.error.name]]</span>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="email">Email</label>
<div class="uk-form-controls">
<input class="uk-input" id="email" name="email" type="text">
<input class="uk-input" id="email" name="email" type="text" value="[[+fi.email]]">
<span class="uk-text-danger" data-error="email">[[+fi.error.name]]</span>
</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="message">Message</label>
<div class="uk-form-controls">
<textarea class="uk-textarea" id="message" name="message" rows="5"></textarea>
<textarea class="uk-textarea" id="message" name="message" rows="5">[[+fi.message]]</textarea>
<span class="uk-text-danger" data-error="message">[[+fi.error.message]]</span>
</div>
</div>
<div class="uk-margin">
<button class="uk-button uk-button-primary">Submit</button>
</div>
</fieldset>
</form>