Состояния формы: ожидание, успех и ошибка

Интерфейс формы должен объяснять, происходит ли отправка и можно ли повторить действие. Таймер, анимация кнопки или отсутствие исключения в коде не доказывают приём данных.

Четыре состояния

Готова: поля доступны. Отправляется: повторное нажатие отключено, есть текст ожидания. Принята: endpoint подтвердил результат по контракту. Ошибка: ввод сохранён, понятно, что делать дальше.

export async function runSubmission(send, ui) {
  ui.setState('sending');
  try {
    await send(); // send обязан отклонить неподтверждённый приём
    ui.setState('accepted');
    ui.reset();
  } catch {
    ui.setState('error'); // Не очищаем введённые значения
  } finally {
    ui.setBusy(false);
  }
}

Понятные сообщения

При ошибке поля укажите поле и ожидаемое исправление. При сетевом сбое скажите, что результат не подтверждён. Не обещайте «ничего не отправлено»: сервер мог сохранить запрос до обрыва связи.

Для доступности используйте спокойное сообщение role=status, а ошибки связывайте с полями. Перевод фокуса на первую ошибку помогает, если не разрушает привычный порядок чтения.

Как проверить

Подставьте тестовые send, которые успешно завершаются, отклоняются и зависают до отмены. Убедитесь, что reset вызывается только в первом случае, busy снимается после завершения и ввод остаётся после отказа.

Сообщение «Поля заполнены корректно» относится к валидации. Состояние принятой заявки связывайте с подтверждённым ответом endpoint.

Обновлено 27 октября 2026 г.