Залипшая ошибка поля глушит форму навсегда

Посетитель отправил форму, сервер ответил «проверьте имя». Посетитель поправил телефон, нажал «Отправить» ещё раз — и ничего. Поле с ошибкой мигнуло, запрос на сервер не ушёл. И не уйдёт, сколько ни нажимай.

Это 11-я часть цикла «WordPress на кэшируемом сайте». Ошибка не про кэш, а про скрипт формы, но нашли мы её тогда же, когда разбирались, почему с кэшируемых страниц теряются заявки, — и она была на всех сайтах с общей основой темы.

Как это устроено

Перед отправкой скрипт формы проверял, нет ли полей с флагом ошибки, и если есть — показывал ошибку и выходил:

_send() {
  const errorInputs = this._inputs.filter((input) => input.isError);
  if (errorInputs.length) {
    errorInputs.forEach((input) => input.showError());
    return; // запрос не уходит
  }
  // … отправка
}

Флаг isError ставился только из ответа сервера, а снимался только вводом в это же поле. Сервер поругался на имя — флаг у имени. Посетитель правит телефон — флаг у имени остаётся. Форма заперта до перезагрузки страницы.

Почему её долго не видели

• нужна ошибка сервера. Пока сервер всё принимает, флагов нет и форма работает;
• на одном сайте перенабор поля флаг снимал, и первый замер по сценарию «исправь то же поле» дал ложное «ошибки нет». Мы так и записали — и ошиблись;
• посетитель не жалуется. Он видит, что кнопка «не работает», и уходит.

Исправление в одну строку

Клиентской проверки формата в этих формах не было вовсе — флаги приходили только с сервера. Значит, перед новой отправкой их нужно сбросить и снова спросить сервер:

_send() {
  // источник истины — сервер: прошлые ошибки снимаем, сервер скажет заново
  this._inputs.filter((input) => input.isError).forEach((input) => input.hideError());
  // … отправка
}

Правило, которое из этого выросло

Форма должна отправиться всегда.

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

Из этого же правила следует решение следующей части: что делать, когда сервер отвергает правильный номер телефона.