Contact Form 7: запрет отправки пустых форм с пользовательской валидацией

Диагностика проблемы пустых отправок в Contact Form 7

Несмотря на встроенную валидацию Contact Form 7, нередко пользователи сталкиваются с ситуацией, когда форма отправляется без заполненных обязательных полей. Это может быть связано с конфликтами JavaScript, кастомными скриптами или ошибками в настройках полей. Для начала убедитесь, что в форме правильно указаны атрибуты required для обязательных полей и что нет отключенной валидации через JavaScript.

Как проверить текущую валидацию

• В браузере откройте форму и попробуйте отправить форму с незаполненными полями.
• Откройте консоль разработчика (F12) для выявления JS-ошибок.
• Проверьте HTML-код формы — поля должны содержать атрибут required.

Пошаговое решение: добавляем пользовательскую валидацию на JavaScript

Если стандартная валидация не срабатывает, добавим кастомный скрипт, который блокирует отправку, если обязательные поля пусты.

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.wpcf7 form').forEach(function(form) {
    form.addEventListener('submit', function(e) {
      var invalid = false;
      form.querySelectorAll('[required]').forEach(function(field) {
        if (!field.value.trim()) {
          invalid = true;
          field.classList.add('wpcf7-not-valid');
          // Можно добавить кастомное сообщение
          var span = document.createElement('span');
          span.className = 'wpcf7-validation-errors';
          span.textContent = 'Это поле обязательно для заполнения';
          if (!field.nextElementSibling || !field.nextElementSibling.classList.contains('wpcf7-validation-errors')) {
            field.parentNode.insertBefore(span, field.nextSibling);
          }
        } else {
          field.classList.remove('wpcf7-not-valid');
          if (field.nextElementSibling && field.nextElementSibling.classList.contains('wpcf7-validation-errors')) {
            field.nextElementSibling.remove();
          }
        }
      });
      if (invalid) {
        e.preventDefault();
      }
    });
  });
});

Этот скрипт добавьте в файл темы или через плагин для пользовательских скриптов. Он проверяет все поля с атрибутом required и блокирует отправку формы, если хотя бы одно из них пустое.

Проверка результата после внедрения

• Откройте страницу с формой и попробуйте отправить ее без заполнения обязательных полей.
• Форма не должна отправляться, показываются сообщения об ошибке рядом с полями.
• При заполнении всех обязательных полей отправка должна проходить корректно.
• Проверьте в консоле браузера отсутствие ошибок JS.

Частые ошибки и как исправить

• Отсутствие атрибута required: Убедитесь, что в тегах input, textarea или select есть required. Без него пользовательская валидация не сработает.
• Конфликт с другими скриптами: Если валидация не срабатывает, отключите сторонние JavaScript и протестируйте форму.
• Повторные сообщения об ошибках: В скрипте предусмотрена проверка, чтобы не дублировать сообщения. Проверьте, что этот код корректно вставлен.
• Стили не применяются: Добавьте CSS для класса .wpcf7-not-valid, чтобы визуально выделять ошибочные поля.

Практические советы по безопасности и производительности

• Не полагайтесь только на клиентскую валидацию — добавьте серверную проверку через хук wpcf7_validate в PHP, чтобы предотвратить отправку пустых или некорректных данных на сервер.
• Оптимизируйте JavaScript, чтобы не блокировать UI и не создавать избыточные DOM-элементы.
• Используйте минимальные стили для отображения ошибок, чтобы не замедлять загрузку.

Пример серверной проверки в functions.php

add_filter('wpcf7_validate_text*', 'custom_required_validation', 20, 2);
function custom_required_validation($result, $tag) {
  $name = $tag->name;
  $value = isset($_POST[$name]) ? trim($_POST[$name]) : '';

  if ($value === '') {
    $result->invalidate($tag, 'Это поле обязательно для заполнения.');
  }
  return $result;
}

Этот код дополнительно проверит обязательные текстовые поля (с * в теге) на сервере и предотвратит отправку пустых значений.

Чек-лист для отладки валидации Contact Form 7

• Проверьте наличие required в обязательных полях.
• Добавьте кастомный JS для блокировки пустой отправки.
• Реализуйте серверную валидацию через фильтры CF7.
• Тестируйте форму в разных браузерах и устройствах.
• Проверьте консоль браузера на ошибки JavaScript.
• Добавьте CSS для визуального отображения ошибок.

Сравнение способов валидации Contact Form 7