VGFormSender

Отправка данных на сервер

Уведомления

Ответ сервера в modal, collapse и toast, ошибки полей и форма внутри VGModal.

Ответ внутри формы

collapse создаётся в начале формы и подходит, когда результат должен оставаться рядом с введёнными данными. Повторная отправка сначала закрывает предыдущий ответ.

HTML 
<form action="/api/form-sender/demo" method="post" data-vgformsender>
  <input name="name" value="Мария" required>
  <input name="email" type="email" value="maria@example.test" required>
  <button type="submit">Отправить</button>
</form>
JavaScript 
VGFormSender.init(form, {
  validate: true,
  alert: {
    type: 'collapse',
    delay: 0,
  },
});
CSS 
/* Дополнительные стили не требуются. */

Формы внутри VGModal

Обе VGModal открываются через Data API. В первом варианте collapse-ответ остаётся внутри формы. Во втором alert.type: modal закрывает форму и открывает отдельную модалку ответа: closeModalsBeforeModal по умолчанию равен true.

HTML 
<div class="d-flex gap-2 flex-wrap">
  <button type="button" data-vg-toggle="modal" data-vg-target="#feedback-modal">
    Ответ внутри формы
  </button>
  <button type="button" data-vg-toggle="modal" data-vg-target="#feedback-modal-response">
    Ответ в отдельной модалке
  </button>
</div>

<div class="vg-modal fade" id="feedback-modal">
  <div class="vg-modal-dialog vg-modal-dialog-centered">
    <div class="vg-modal-content">
      <div class="vg-modal-header"><h2 class="vg-modal-title">Обратная связь</h2></div>
      <div class="vg-modal-body">
        <form action="/api/form-sender/demo" method="post" data-vgformsender>
          <input name="name" required>
          <input name="email" type="email" required>
          <button type="submit">Отправить</button>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="vg-modal fade" id="feedback-modal-response">
  <div class="vg-modal-dialog vg-modal-dialog-centered">
    <div class="vg-modal-content">
      <div class="vg-modal-header"><h2 class="vg-modal-title">Заявка с modal-ответом</h2></div>
      <div class="vg-modal-body">
        <form action="/api/form-sender/demo" method="post" data-vgformsender>
          <input name="name" required>
          <input name="email" type="email" required>
          <button type="submit">Отправить и открыть ответ</button>
        </form>
      </div>
    </div>
  </div>
</div>
JavaScript 
VGFormSender.init(document.querySelector('#feedback-modal form'), {
  validate: true,
  alert: {
    type: 'collapse',
    delay: 0,
  },
});

VGFormSender.init(document.querySelector('#feedback-modal-response form'), {
  validate: true,
  alert: {
    type: 'modal',
    delay: 0,
  },
});
CSS 
#feedback-modal,
#feedback-modal-response {
  --vg-modal-width: min(560px, calc(100vw - 1.5rem));
}

Ошибка в toast

HTTP 422 переводит запрос в error-сценарий. VGFormSender собирает сообщения из response.errors и передаёт их VGToast.

HTML 
<form action="/api/form-sender/demo" method="post" data-vgformsender>
  <input type="hidden" name="result" value="error">
  <input name="name" value="Иван" required>
  <input name="email" type="email" value="ivan@example.test" required>
  <button type="submit">Получить ошибку</button>
</form>
JavaScript 
VGFormSender.init(form, {
  validate: true,
  alert: {
    type: 'toast',
    delay: 4200,
    toast: {
      placement: 'top-right',
      stack: true,
    },
  },
  callback: {
    afterError: (form, instance, event, data) => {
      const response = typeof data.response === 'string'
        ? JSON.parse(data.response)
        : data.response;

      Object.entries(response.errors).forEach(([name, messages]) => {
        const field = form.elements.namedItem(name);
        const group = field?.closest('.form-field');
        group?.classList.add('is-error');
        // Первый текст messages выводится как .form-message.is-error.
      });
    },
  },
});
CSS 
/* Дополнительные стили не требуются. */