0

我在这里有一个标签player_name和level一个下一步按钮。

<div id="tabs_here">
    <div class="tab-content">
        <!-- THIS IS THE FIRST TAB -->
        <div id="demo-cls-tab1" class="tab-pane">
            <fieldset>
                <input type="text" id="player_name" class="form-control" />
            </fieldset>
        </di>

        <!-- THIS IS THE SECOND TAB -->
        <div id="demo-cls-tab2" class="tab-pane">
            <fieldset>
                <select class="form-control" id="level">
                    <option>---- Select Level ----</option>
                    <option>Level 1: Easy</option>
                    <option>Level 2: Meduim</option>
                    <option>Level 3: Hard</option>
                    <option>Level 4: Legendary</option>
                </select>
            </fieldset>
        </div>

        <!-- AND SO ON -->
    </div>
</div>

<button class="next">NEXT</button>

下一个按钮用于更改以下选项卡。

$('#tabs_here').bootstrapWizard({
    tabClass: 'wz-classic',
    nextSelector: '.next',
    previousSelector: '.previous',
    onTabClick: function(tab, navigation, index) {
        return false;
    },
    onInit: function() {
        // some functions here
    },
    onTabShow: function(tab, navigation, index) {
        var $total = navigation.find('li').length;
        var $current = index + 1;
        var $percent = ($current / $total) * 100;
        var wdt = 100 / $total;
        var lft = wdt * index;
        $('#tabs_here').find('.progress-bar').css({ width: $percent + '%' });

        // If it's the last tab then hide the last button and show the finish instead
        if ($current >= $total) {
            $('#tabs_here').find('.next').hide();
            $('#tabs_here').find('.finish').show();
            $('#tabs_here').find('.finish').prop('disabled', false);
        } else {
            $('#tabs_here').find('.next').show();
            $('#tabs_here').find('.finish').hide().prop('disabled', true);
        } 
    }
});

如何在选项卡内输入为空的地方实现验证，下一个按钮不应该工作。我在想这样的事情

if(index==0) {
    var player_name = $("#player_name");

    if(player_name.val()!="") {
        // proceed to next tab when next is clicked
    }
    else {
        player_name.css({'border-color':'red'});
        // DO NOT proceed to next tab
    }
}
else if(index==1) {
    var level = $("#level");

    if(level.val()!="") {
        // proceed to next tab
    }
    else {
        level.css({'border-color':'red'});
        // DO NOT proceed to next tab
    }
}

我在哪里以及如何实现这一点？

4

1 回答 1

0

解决方案：

我在寻找解决方案时采用了不同的方法，偶然发现了这个链接

我只需要在其中添加onClick功能并在其中bootstrap wizard插入验证。

onClick: function(tab, navigation, index) {
    if(index==0) {
        var player_name = $("#player_name");

        if(player_name.val()!="") {
            // proceed to next tab when next is clicked
            return true;
        }
        else {
           player_name.css({'border-color':'red'});
           // DO NOT proceed to next tab
           return false;
        }
    }
    else if(index==1) {
        var level = $("#level");

        if(level.val()!="") {
            // proceed to next tab
            return true;
        }
        else {
            level.css({'border-color':'red'});
            // DO NOT proceed to next tab
            return false;
        }
    }
}

并且必须return true继续到下一个选项卡并return false留在选项卡上。我希望这对未来的读者有所帮助。

于 2018-01-20T14:09:24.427 回答