Настройка условной логики в формах 1С-Битрикс

Настройка условной логики в формах 1С-Битрикс

Форма обратной связи с 15 полями показывает все 15 сразу. Пять из них актуальны только для юридических лиц, три — только при выборе определённого типа запроса. Пользователь видит лишние поля и уходит. Условная логика скрывает и показывает поля в зависимости от значений других полей.

Веб-формы Битрикса и их структура

Модуль form хранит формы в b_form, поля — в b_form_field. Каждое поле имеет тип (SID): text, select, radio, checkbox, textarea и т.д. Стандартный модуль форм не поддерживает условную логику из коробки — она добавляется через JavaScript в шаблоне компонента bitrix:form.result.new.

Компонент располагается в /bitrix/components/bitrix/form.result.new/. Шаблон копируется в /bitrix/templates/[template]/components/bitrix/form.result.new/[template_name]/template.php.

В шаблоне каждое поле формы рендерится с атрибутом id, формируемым по маске field_[SID], где SID — системный идентификатор поля из b_form_field. Это якорь для JavaScript-логики.

Реализация через data-атрибуты

Условия описываются через data-* атрибуты на контейнерах полей. Подход позволяет держать конфигурацию рядом с разметкой:

<!-- Поле тип_клиента (radio: физлицо / юрлицо) -->
<div class="form-row" id="row_CLIENT_TYPE">
    <!-- рендер поля -->
</div>

<!-- Поле ИНН — показывать только если тип_клиента = 'company' -->
<div class="form-row"
     id="row_INN"
     data-condition-field="CLIENT_TYPE"
     data-condition-value="company"
     style="display:none">
    <!-- рендер поля -->
</div>

JavaScript-обработчик:

document.addEventListener('DOMContentLoaded', function () {
    function applyConditions() {
        document.querySelectorAll('[data-condition-field]').forEach(function (row) {
            var fieldSid   = row.dataset.conditionField;
            var reqValue   = row.dataset.conditionValue;
            var controller = document.querySelector('[name="form_field_' + fieldSid + '"]');
            if (!controller) return;

            var currentValue = controller.type === 'radio'
                ? (document.querySelector('[name="form_field_' + fieldSid + '"]:checked') || {}).value
                : controller.value;

            row.style.display = (currentValue === reqValue) ? '' : 'none';

            // Сбросить значение скрытого поля
            if (row.style.display === 'none') {
                row.querySelectorAll('input, select, textarea').forEach(function (el) {
                    el.value = '';
                    if (el.type === 'checkbox' || el.type === 'radio') el.checked = false;
                });
            }
        });
    }

    // Навесить на все контролируемые поля
    document.querySelectorAll('[data-condition-field]').forEach(function (row) {
        var fieldSid   = row.dataset.conditionField;
        var controller = document.querySelectorAll('[name="form_field_' + fieldSid + '"]');
        controller.forEach(function (el) {
            el.addEventListener('change', applyConditions);
        });
    });

    applyConditions(); // Применить при загрузке
});

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

Важный момент: скрытое поле не должно быть обязательным на сервере, если оно скрыто по условию. Стандартный модуль form проверяет обязательность поля по флагу REQUIRED в b_form_field без учёта условий.

Обход через обработчик события OnBeforeResultAdd:

AddEventHandler('form', 'OnBeforeResultAdd', function($formId, &$arFields) {
    // Если тип клиента не юрлицо — убрать ИНН из обязательных
    if (($arFields['form_field_CLIENT_TYPE'] ?? '') !== 'company') {
        unset($arFields['form_field_INN']);
    }
});

Множественные условия

Для полей с несколькими условиями (показать если A = x И B = y) data-атрибуты расширяются:

data-condition-rules='[{"field":"CLIENT_TYPE","value":"company"},{"field":"REQUEST_TYPE","value":"credit"}]'

JavaScript читает JSON.parse(row.dataset.conditionRules) и проверяет все условия через Array.every(). Это покрывает большинство сценариев без подключения внешней библиотеки.