Как не сломать обработчик формы при правке верстки

Форму на сайте легко сломать во время, казалось бы, безобидной правки верстки. Дизайнер попросил поменять поля местами, добавили маску телефона, переименовали input, завернули кнопку в новый блок — и заявки перестали приходить. Внешне форма может выглядеть лучше, но backend уже получает не те данные.

Чтобы не ловить такие ошибки после публикации, форму нужно проверять как связку HTML, JavaScript и серверного обработчика.

Не менять name без проверки backend

Самая частая ошибка — изменить name поля. id и class нужны в основном для верстки и JavaScript, а name определяет, с каким ключом данные уйдут на сервер.

<input type="text" name="phone" id="contact-phone">

Если обработчик ждёт phone, а после правки поле стало называться user_phone, сервер получит пустое значение. Поэтому перед изменением name нужно найти, где это поле читается.

grep -R "phone" -n controllers models views

В Yii2 при ActiveForm name часто формируется из модели. Если вручную переписать поле без понимания структуры, можно сломать загрузку данных в модель.

<?= $form->field($model, 'phone')->textInput() ?>

CSRF-токен

Если форма отправляется через POST, CSRF-защита должна сохраниться. При ручной замене формы иногда забывают hidden-поле или не передают токен в AJAX-запросе.

<input type="hidden" name="_csrf" value="<?= Yii::$app->request->csrfToken ?>">

Для AJAX можно брать токен из meta:

<meta name="csrf-token" content="<?= Yii::$app->request->csrfToken ?>">

$.ajaxSetup({
    headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
});

Маска телефона не должна портить данные

Маска телефона помогает пользователю, но иногда мешает отправке. Например, поле визуально заполнено, а валидация ждёт только цифры. Или маска не инициализировалась после AJAX-подгрузки формы.

Стоит проверить три варианта:

• пустой телефон;
• частично заполненный телефон;
• корректный телефон в нужном формате.

На backend лучше не доверять маске полностью, а нормализовать значение перед проверкой.

$phone = preg_replace('/\D+/', '', $model->phone);

AJAX и обычная отправка

Если форма отправляется через AJAX, нужно проверить, что обработчик события не потерялся после изменения классов или структуры HTML.

$(document).on('submit', '.js-contact-form', function (e) {
    e.preventDefault();

    $.post($(this).attr('action'), $(this).serialize());
});

Лучше привязываться к стабильному классу формы, а не к случайному расположению блока в верстке. Если JavaScript ищет кнопку через сложный селектор, любая правка HTML может его сломать.

Проверить action и method

После переноса формы в другой шаблон можно случайно потерять action или method. Тогда данные уйдут не туда или уйдут GET-запросом.

<form action="/contact/send" method="post">

В браузере это проверяется во вкладке Network. Нужно посмотреть URL запроса, метод, payload и ответ сервера.

Серверная валидация важнее клиентской

Клиентская валидация удобна, но она не заменяет серверную. Пользователь может отключить JavaScript, а AJAX может отправить данные напрямую. Поэтому backend должен проверять обязательные поля, формат email, телефон и согласие с условиями, если оно нужно.

public function rules()
{
    return [
        [['name', 'phone'], 'required'],
        ['email', 'email'],
        ['phone', 'string', 'max' => 30],
    ];
}

Если после правки формы заявки не приходят, нужно залогировать ошибки модели.

if (!$model->validate()) {
    Yii::error($model->errors, 'contact-form');
}

Письмо и получатели

Иногда форма данные принимает, но письмо не уходит из-за изменений в шаблоне письма. Например, в шаблоне используется поле, которое больше не заполняется.

Yii::$app->mailer
    ->compose('contact', ['model' => $model])
    ->setTo('manager@example.ru')
    ->setFrom(['no-reply@example.ru' => 'Site'])
    ->setSubject('Заявка с сайта')
    ->send();

После правки формы стоит отправить тестовую заявку и проверить не только сообщение “успешно”, но и фактическое письмо.

Чек-лист перед публикацией

1. Проверить, что name полей не изменились случайно.
2. Проверить action и method.
3. Проверить CSRF для обычной и AJAX-отправки.
4. Проверить маску телефона на пустом, частичном и полном вводе.
5. Проверить серверную валидацию.
6. Отправить тестовую заявку.
7. Проверить письмо и логи.
8. Проверить поведение без JavaScript, если форма критична.

Форма — это не только верстка. Это точка соединения интерфейса, JavaScript, backend, почты и иногда CRM. Поэтому даже небольшие изменения лучше проверять по полному пути заявки: от ввода данных до получения письма.