Полный цикл запроса
Индикатор под формой показывает callbacks и DOM-события. Искусственная задержка beforeSend делает промежуточное состояние заметным, а сервер подтверждает поле source из fields.
HTML
<form action="/api/form-sender/demo" method="post" data-vgformsender>
<input name="name" value="Ольга" required>
<input name="email" type="email" value="olga@example.test" required>
<button type="submit">Запустить сценарий</button>
</form>
JavaScript
VGFormSender.init(form, {
validate: true,
fields: [{source: 'lifecycle-demo'}],
alert: {type: 'toast', delay: 3200},
interceptors: {
beforeSend: () => new Promise((resolve) => setTimeout(resolve, 600)),
},
callback: {
afterInit: (form, instance) => console.log('ready', instance),
afterValidateError: (form, instance, event, errors) => console.log(errors),
afterSend: (form, instance, status, data) => console.log(status, data),
},
});
form.addEventListener('vg.fs.before', (event) => console.log(event.detail));
form.addEventListener('vg.fs.success', (event) => console.log(event.detail));
form.addEventListener('vg.fs.error', (event) => console.log(event.detail));
CSS
/* Дополнительные стили не требуются. */