Налаштування умовної логіки у формах 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(). Це покриває більшість сценаріїв без підключення зовнішньої бібліотеки.