Как добавить проверку и валидацию форм в WordPress

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

Почему важна валидация форм в WordPress

Без валидации пользователь может отправить форму с некорректными данными: пустыми обязательными полями, неправильным форматом email, слишком коротким паролем и т.д. Это приводит к ошибкам в обработке, снижает качество данных и может создать проблемы с безопасностью.

Валидация помогает:

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

В WordPress есть множество способов реализовать это: от использования JavaScript и HTML5 атрибутов до серверной проверки на PHP.

Валидация форм на стороне клиента — базовые методы

Для быстрого базового контроля можно использовать HTML5 атрибуты, например required, type="email", pattern. Они работают в браузере и не требуют сложного кода.

Пример простого поля с проверкой email:

<input type="email" name="wplancer_email" required placeholder="Введите email" />

Однако HTML5 валидация легко обходится и не всегда удобна для кастомизации текста ошибок.

Для более гибкой валидации на клиенте часто используют JavaScript. Например, с помощью jQuery можно проверить поля при отправке формы:

jQuery(document).ready(function($) {
    $('#wplancer_form').on('submit', function(e) {
        var email = $('#wplancer_email').val();
        if (!email || !email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
            alert('Пожалуйста, введите корректный email.');
            e.preventDefault();
        }
    });
});

Серверная валидация в WordPress с примером кода

Клиентская валидация важна, но ее недостаточно. Всегда нужно проверять данные на сервере, чтобы обезопасить сайт и гарантировать корректность.

Рассмотрим, как реализовать серверную валидацию на PHP в WordPress с использованием пользовательской функции — wplancer_validate_form_data.

Пример обработки и валидации данных формы в функции, подключаемой через обработчик admin_post_nopriv_wplancer_form_submit (для незарегистрированных пользователей) и admin_post_wplancer_form_submit (для зарегистрированных):

add_action('admin_post_nopriv_wplancer_form_submit', 'wplancer_handle_form_submission');
add_action('admin_post_wplancer_form_submit', 'wplancer_handle_form_submission');

function wplancer_handle_form_submission() {
    // Проверяем nonce для безопасности
    if (!isset($_POST['wplancer_form_nonce']) || !wp_verify_nonce($_POST['wplancer_form_nonce'], 'wplancer_form_action')) {
        wp_die('Ошибка безопасности. Попробуйте еще раз.');
    }

    $errors = wplancer_validate_form_data($_POST);

    if (!empty($errors)) {
        // Обработка ошибок, можно перенаправить обратно с сообщениями
        wp_redirect(add_query_arg('wplancer_errors', urlencode(json_encode($errors)), wp_get_referer()));
        exit;
    }

    // Здесь обработка валидных данных (сохранение, отправка письма и т.д.)

    wp_redirect(add_query_arg('wplancer_success', '1', wp_get_referer()));
    exit;
}

function wplancer_validate_form_data($data) {
    $errors = array();

    if (empty($data['wplancer_name'])) {
        $errors['name'] = 'Имя обязательно для заполнения.';
    } elseif (strlen($data['wplancer_name']) < 3) {
        $errors['name'] = 'Имя должно содержать минимум 3 символа.';
    }

    if (empty($data['wplancer_email']) || !filter_var($data['wplancer_email'], FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'Введите корректный email.';
    }

    if (!empty($data['wplancer_phone']) && !preg_match('/^\+?[0-9\-\s]{7,15}$/', $data['wplancer_phone'])) {
        $errors['phone'] = 'Введите корректный номер телефона.';
    }

    return $errors;
}

В этом примере мы проверяем обязательность имени и email, корректность email и формат телефона. Ошибки возвращаются в массиве, который можно использовать для вывода сообщений пользователю.

Примеры популярных плагинов для валидации форм в WordPress

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

• Contact Form 7 — один из самых популярных плагинов для создания форм, поддерживает базовую валидацию по типу поля (email, номер телефона и т.д.) и позволяет расширять функционал с помощью дополнительных плагинов и кастомных хуков.
• WPForms — удобный конструктор форм с визуальным редактором и мощной системой валидации, включая условные логики и кастомные правила.
• Gravity Forms — премиум-плагин с расширенными возможностями, где можно настраивать серверную и клиентскую валидацию, создавать сложные формы с многоступенчатой проверкой.

Например, в Contact Form 7 можно добавить в shortcode атрибуты, которые будут проверять поля:

[email* your-email] — обязательное поле email
[text* your-name minlength:3 maxlength:50] — обязательное текстовое поле с минимальной и максимальной длиной

Отладка и вывод ошибок в формах WordPress

Очень важный момент — корректно показывать пользователю ошибки. Без этого он не поймет, почему форма не отправляется.

В нашем примере с пользовательской формой можно вывести ошибки так:

if (isset($_GET['wplancer_errors'])) {
    $errors = json_decode(urldecode($_GET['wplancer_errors']), true);
    if (!empty($errors)) {
        echo '<div class="wplancer-errors">';
        foreach ($errors as $field => $message) {
            echo '<p><strong>' . esc_html($field) . ':</strong> ' . esc_html($message) . '</p>';
        }
        echo '</div>';
    }
}

Так пользователь увидит, какие именно поля требуют исправления.

Итоги и рекомендации по валидации форм в WordPress

Для качественной валидации форм в WordPress нужно использовать сочетание клиентской и серверной проверки. Клиентская улучшает UX — пользователь быстро получает обратную связь, серверная же защищает и гарантирует правильность данных.

Если вы создаете простые формы, HTML5 атрибутов и базового JS может быть достаточно. Для более сложных случаев лучше писать собственные функции в PHP или использовать мощные плагины с расширенной валидацией.

Обязательно проверяйте данные на сервере, используйте nonce для безопасности и корректно выводите ошибки пользователю.

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