Проверка полей формы в элементарных

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

Одним из наиболее важных виджетов является виджет “Формы”, также называемый элементарными формами.

Elementor Forms позволяет нам создавать формы довольно быстро и функционально для разных нужд, также “Действия после отправки” (действия после нажатия кнопки отправки) весьма полезны и лучше всего, что их можно комбинировать, т.е. вы можете добавить человека в список рассылки, отправить сообщение администратору, а другое тому, кто отправил форму, отправить веб-хук в Zapier или другой подобный сервис и в конце перенаправить пользователя на страницу благодарности.

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

Как? Элемент или имеет только базовую проверку интерфейса с использованием совпадений и обязательных полей. Кто-либо, использующий инспектор элементов любого браузера, может изменить код и отправить любую информацию без соответствующей проверки.

Некоторые люди также выбирают чистые библиотеки Javascript или jQuery для проверки форм, но это создает еще одну проблему, которая заключается в добавлении дополнительного веса к той, в которой уже есть Elementor и его библиотеки. А при отключении Javascript все эти проверки идут насмарку.

Есть ли решение?

Да, проверки с помощью бэкенда. Делая это таким образом, конечный пользователь, даже если он использует инспектор или отключает javascript, данные все равно будут проверены.

Элементарные формы имеют крючки, которые позволяют проверять серверную часть и возвращать сообщения об ошибках в режиме реального времени через Ajax.

Как это реализовать?

Вы должны создать плагин или отредактировать functions.php файл вашей темы (Я рекомендую работать с дочерней темой), чтобы добавить эти проверки.

Хорошо, но что это за код?

У вас есть это ниже:

Проверка электронной почты

Проверка, которая выполняется по умолчанию в элементе или, в основном, ищет at (@) и точку (.), что не очень помогает иметь действительные электронные письма.

Разместив следующий код, вы получите гораздо более точную проверку:

add_action( 'elementor_pro/forms/validation/email', function( $field, $record, $ajax_handler ) {
    if ( !filter_var(  $field['value'], FILTER_VALIDATE_EMAIL ) ) {
        $ajax_handler->add_error( $field['id'], 'Please enter a valid email.' );
    }
}, 10, 3 );

Проверка по идентификатору поля

Каждое поле в элементарных формах имеет идентификатор, который мы можем настроить. Благодаря этому мы можем выполнить общую проверку во всех формах нашего сайта, где поля имеют одинаковый идентификатор.

Во-первых, мы добавим эту функцию, которая позволит нам получить поле по введенному идентификатору.

// This function allows to obtain a field by ID, if it does not exist it returns FALSE.
function rnz_elementor_get_field( $id, $record )
{
    $fields = $record->get_field( [
        'id' => $id,
    ] );

    if ( empty( $fields ) ) {
        return false;
    }

    return current( $fields );
}

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

function rnz_elementor_forms_validation( $record, $ajax_handler ) {

    // Validate that the privacy policy field is checked.
    // This is useful for when you want to add custom notifications.
    if( $field = rnz_elementor_get_field( 'accept_terms', $record ) )
    {
        if( $field['value'] != 'on' ){
            $ajax_handler->add_error( $field['id'], 'You must accept the policies to submit the form.' );
        }
    }

    // Remove spaces before and after the text, if any, and verify that it is not an empty entry.
    if( $field = rnz_elementor_get_field( 'name', $record ) )
    {
        if( $field['required'] == 'yes' ){
            if( empty( trim($field['value']) ) ){ // Check if it is empty
                $ajax_handler->add_error( $field['id'], 'Please enter your name.' );
            } else if( 3 >= strlen(trim($field['value'])) ){
                $ajax_handler->add_error( $field['id'], 'Your name must have at least 3 digits.' );
            }
        }
    }

    if( $field = rnz_elementor_get_field( 'age', $record ) )
    {
        if( $field['required'] == 'yes' ){
            if( empty( trim($field['value']) ) ){
                $ajax_handler->add_error( $field['id'], 'Please enter your age.' );
            } else if( filter_validate( trim($field['value']), FILTER_VALIDATE_INT )  ){
                $ajax_handler->add_error( $field['id'], 'Only numbers for your age are accepted.' );
            }
        }
    }

}

Наконец, мы должны добавить действие, чтобы все это работало.

add_action( 'elementor_pro/forms/validation', 'rnz_elementor_forms_validation', 10, 2 );

Оригинал: “https://dev.to/renzoster/validate-form-fields-in-elementor-54cl”