如何在Bootstrap Stepper中根据select切换控制FormValidation验证状态

你可以把下拉框的监听逻辑整合到现有代码的私有函数体系中，具体实现如下：

修改后的完整代码（新增部分已标注） #

var StepperDocumenti = function () {
    // Elements
    var stepper;
    var form;
    var formSubmitButton;
    var formContinueButton;
    // 新增：缓存下拉框元素
    var tipoRigaSelect;

    // Variables
    var stepperObj;
    var validations = [];

    // Private Functions
    var initStepper = function () {
        // Initialize Stepper
        stepperObj = new KTStepper(stepper);

        // Validation before going to next page
        stepperObj.on('kt.stepper.next', function (stepper) {
            console.log('stepper.next ' + stepper.getCurrentStepIndex());

            // Validate form before change stepper step
            var validator = validations[stepper.getCurrentStepIndex() - 1]; // get validator for current step
            
            if (validator) {
                validator.validate().then(function (status) {
                    console.log('validazione step: ' + status);

                    if (status == 'Valid') {
                        stepper.goNext();
                        KTUtil.scrollTop();
                    } else {
                        Swal.fire({
                            text: "Alcuni campi obbligatori non sono stati compilati correttamente, controllare.",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "OK!",
                            customClass: {
                                confirmButton: "btn btn-light"
                            }
                        }).then(function () {
                            KTUtil.scrollTop();
                        });
                    }
                });
            } else {
                stepper.goNext();
                KTUtil.scrollTop();
            }
        });

        // Prev event
        stepperObj.on('kt.stepper.previous', function (stepper) {
            console.log('stepper.previous');
            stepper.goPrevious();
            KTUtil.scrollTop();
        });
    }

    var handleForm = function () {
        formSubmitButton.addEventListener('click', function (e) {
            // Validate form before change stepper step
            var validator = validations[2]; // get validator for last form

            validator.validate().then(function (status) {
                console.log('validated form: ' + status);

                if (status == 'Valid') {
                    // Prevent default button action
                    e.preventDefault();

                    // Disable button to avoid multiple click
                    formSubmitButton.disabled = true;

                    // Show loading indication
                    formSubmitButton.setAttribute('data-kt-indicator', 'on');

                    // Simulate form submission
                    setTimeout(function () {
                        // Hide loading indication
                        formSubmitButton.removeAttribute('data-kt-indicator');
                        // Enable button
                        formSubmitButton.disabled = false;
                        form.submit();
                    }, 1000);
                } else {
                    Swal.fire({
                        text: "Alcuni campi obbligatori non sono stati compilati correttamente, controllare.",
                        icon: "error",
                        buttonsStyling: false,
                        confirmButtonText: "Ok!",
                        customClass: {
                            confirmButton: "btn btn-light"
                        }
                    }).then(function () {
                        KTUtil.scrollTop();
                    });
                }
            });
        });
    }

    var initValidation = function () {
        // Init form validation rules.
        // Step 1
        validations.push(FormValidation.formValidation(
            form,
            {
                fields: {
                    'anno': {
                        validators: {
                            notEmpty: {
                                message: 'L\'anno è obbligatorio'
                            }
                        }
                    }
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        ));

        // Step 2
        validations.push(FormValidation.formValidation(
            form,
            {
                fields: {
                    'id_um': {
                        validators: {
                            notEmpty: {
                                enabled: true, // 默认启用验证
                                message: 'L\'unità di misura è obbligatoria'
                            }
                        }
                    }
                },
                plugins: {
                    trigger: new FormValidation.plugins.Trigger(),
                    bootstrap: new FormValidation.plugins.Bootstrap5({
                        rowSelector: '.fv-row',
                        eleInvalidClass: '',
                        eleValidClass: ''
                    })
                }
            }
        ));
    }

    // 新增：监听tipo_riga下拉框变更，控制id_um的验证状态
    var initTipoRigaValidationToggle = function() {
        tipoRigaSelect = form.querySelector('[name="tipo_riga"]');
        if (!tipoRigaSelect) return;

        // 获取Step2的验证实例
        const step2Validator = validations[1];

        // 初始化时先执行一次状态切换
        toggleIdUmValidation(step2Validator, tipoRigaSelect.value);

        // 监听下拉框变更事件
        tipoRigaSelect.addEventListener('change', function() {
            toggleIdUmValidation(step2Validator, this.value);
        });
    }

    // 新增：封装状态切换逻辑
    var toggleIdUmValidation = function(validator, tipoValue) {
        if (tipoValue === 'D' || tipoValue === 'C') {
            validator.disableValidator('id_um', 'notEmpty');
        } else {
            // 其他值时启用验证
            validator.enableValidator('id_um', 'notEmpty');
        }
        // 触发一次字段重验证，更新UI状态
        validator.revalidateField('id_um');
    }

    return {
        // Public Functions
        init: function () {
            stepper = document.querySelector('#documenti_stepper');
            if (!stepper) return;

            form = stepper.querySelector('#form_documenti');
            formSubmitButton = stepper.querySelector('[data-kt-stepper-action="submit"]');
            formContinueButton = stepper.querySelector('[data-kt-stepper-action="next"]');

            initStepper();
            initValidation();
            handleForm();
            // 新增：调用下拉框监听初始化
            initTipoRigaValidationToggle();
        }
    };
}();

// On document ready
KTUtil.onDOMContentLoaded(function () {
    StepperDocumenti.init();
});

核心逻辑说明 #

• 新增initTipoRigaValidationToggle函数，负责绑定下拉框的change事件，同时在初始化时执行一次状态判断，确保页面加载时验证状态正确
• 封装toggleIdUmValidation函数，统一处理验证规则的启用/禁用逻辑，代码更易维护
• 使用disableValidator和enableValidator精准控制id_um字段的notEmpty验证规则
• 调用revalidateField方法更新字段的验证UI状态，确保用户能实时看到验证状态变化
• 采用原生DOM方法获取元素，避免额外依赖（如果项目必须用jQuery，可改回$('[name="tipo_riga"]')）

内容的提问来源于stack exchange，提问作者Daniele Maffei