VGFormSender

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

Основы

AJAX-отправка через Data API, нативная HTML5-валидация и состояние кнопки.

AJAX-отправка и modal

Атрибут data-vgformsender переводит submit в AJAX-запрос. action и method формы становятся endpoint и HTTP-методом, а кнопка блокируется до ответа.

<form action="/api/form-sender/demo" method="post" data-vgformsender>
  <input type="hidden" name="_token" value="...">
  <label for="contact-name">Имя</label>
  <input id="contact-name" name="name" required>
  <label for="contact-email">Email</label>
  <input id="contact-email" name="email" type="email" required>
  <button type="submit">Отправить</button>
</form>

import {VGFormSender} from 'vgapp';

VGFormSender.init(document.querySelector('[data-vgformsender]'), {
  validate: true,
  button: {
    spinner: {enabled: true},
  },
});

/* Дополнительные стили не требуются. */

Нативная валидация

validate: true вызывает checkValidity() до запроса. afterValidateError получает элемент и сообщение каждого невалидного поля; демо добавляет is-error на form-field и form-message под компонентом.

<form action="/api/form-sender/demo" method="post" data-vgformsender>
  <input name="name" minlength="2" required>
  <input name="email" type="email" required>
  <button type="submit">Проверить и отправить</button>
</form>

const showFieldError = ({element, message}) => {
  const group = element.closest('.form-field');
  if (!group) return;

  group.classList.add('is-error');
  group.insertAdjacentHTML('beforeend', `
    <div class="form-footer" data-field-error>
      <div class="form-message is-error">${message}</div>
    </div>
  `);
};

VGFormSender.init(form, {
  validate: true,
  callback: {
    afterValidateError: (form, instance, event, errors) => {
      errors.forEach(showFieldError);
    },
  },
});

/* Дополнительные стили не требуются. */

Что получает afterValidateError

VGFormSender передаёт массив ошибок четвёртым аргументом callback. element — исходный DOM-инпут, message — локализованное validationMessage браузера, validity — снимок ValidityState.

[
  {
    element: HTMLInputElement,
    name: 'email',
    id: 'contact-email',
    type: 'email',
    value: 'wrong-email',
    message: 'Введите часть адреса после символа «@».',
    validity: {typeMismatch: true, valid: false}
  }
]