使用Bootstrap向导控件，但是在选项卡中验证失败时，如何防止进入其他选项卡

Question

我正在使用 hte Bootstrap 向导。用户可以单击下一个或上一个按钮或上面的选项卡来切换到向导中的不同页面。 在向导的一页上，我需要验证一个数字是否大于另一个。如果不是，则验证失败。按下一个按钮不会转到下一页。当用户将选项卡推送到稍后的选项卡并且向导允许他们转到向导中的新页面时，就会出现问题。

我的 javascript html 代码如下所示：

    @* Javascript code for the wizard *@
    <script type="text/javascript">
        $(document).ready(function () {
            $('#rootwizard').bootstrapWizard({
                onNext: function (tab, navigation, index) {

                    if(WizardValidation(index) == false)
                    {
                        return false;
                    }

                },

                onTabClick: function(tab, navigation, index)
                {
                    if (WizardValidation(tab[0].getAttribute('data-index')) == false) {
                        return false;
                    }
                },

                onTabShow: function (tab, navigation, index) {

                    if (WizardValidation(tab[0].getAttribute('data-index')) == false) {
                        return false;
                    }

                    var $total = navigation.find('li').length;
                    var $current = index + 1;
                    var $percent = ($current / $total) * 100;
                    $('#rootwizard').find('.progress-bar').css({ width: $percent + '%' });
                }
            });
            window.prettyPrint && prettyPrint()
        });


        function WizardValidation(gotoIndex)
        {
            // Validation for various parts in the wizard
            if (gotoIndex > 2) {
                var oDaysMin = document.getElementById('OobeDaysMin').value

                if (oDaysMin.length == 0) {
                    alert('You must enter a valid integer value');
                    document.getElementById('OobeDaysMin').focus();
                    return false;
                }

                var oDaysMax = document.getElementById('OobeDaysMax').value

                if (oDaysMax.length == 0) {
                    alert('You must enter a valid integer value');
                    document.getElementById('OobeDaysMax').focus();
                    return false;
                }

                if ((parseInt(oDaysMax, 10) < parseInt(oDaysMin, 10))) {
                    alert('OobeDaysMax must be equal or greater than OobeDaysMin');
                    document.getElementById('OobeDaysMax').focus();
                    return false;
                }
            }
        }

            <section id="wizard">
                <div id="rootwizard">

                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="container">
                                <ul>
                                    <li id="wiz0" data-index="0"><a href="#tab1" data-toggle="tab">Name</a></li>
                                    <li id="wiz1" data-index="1"><a href="#tab2" data-toggle="tab">Questions / Layout</a></li>
                                    <li id="wiz2" data-index="2"><a href="#tab3" data-toggle="tab">Configuration</a></li>
                                    <li id="wiz3" data-index="3"><a href="#tab4" data-toggle="tab">Assests / Themes</a></li>
                                    <li id="wiz4" data-index="4"><a href="#tab5" data-toggle="tab">Quota Mgmt</a></li>
                                    <li id="wiz5" data-index="5"><a href="#tab6" data-toggle="tab">Go Live</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

我已尝试使用 onTabClick 和 onTabShow 事件来尝试防止允许某人在出现验证错误的页面之后转到页面。 关于如何做到这一点的任何想法？

谢谢。

Answer 1

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href");
    console.log(target);
    if (target == "#hesapbilgileri") {
        if ($('#anlasmakabulcheck').is(':checked')) {
            $('.test .wz-steps a[href="#first"]').tab('show');   
        }
        else
            $('.test .wz-steps a[href="#second"]').tab('show');   
    }
});