Validation on BootstrapWizard

Question

I have here a tab for player_name and level and a next button.

<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>

The next button is for changing the following tab.

$('#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);
        } 
    }
});

How can I implement a validation where, an input is empty inside a tab, the next button should not work. I'm thinking about something like this,

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
    }
}

Where and how can I implement this?

score 0 · Accepted Answer · answered Jan 20 '18 at 14:09

Solution:

I did a different approach in searching for a solution, and stumble upon this link

I just have to add, onClick function within the bootstrap wizard and insert the validation within.

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;
        }
    }
}

and have to return true to proceed to next tab and return false to stay on tab. I hope this helps future readers.

Validation on BootstrapWizard

1 Answers1