Question

I’ve been banging my head against a wall for a day now trying to figure out some simple tab manipulation. I have 3 tabs, each containing different pieces of a form. I need to disable the 2nd and 3rd while the user is on the first. Then when the fill out the first page and click continue and the validation returns true, I can enable the 2nd tab and slide to that. Then when they finish the 2nd page, hit continue, and validation returns true, I can enable the 3rd tab and slide into it. The main thing is I need to disable the tabs until the tab they are currently on is validated. So here’s my html:

<ul class="nav nav-tabs" id="myTab">
  <li><a href="#options">Options</a></li>
  <li><a href="#information">Information</a></li>
  <li><a href="#payment">Payment</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="options">
    <form id="frmtype1" action="" name="frmtype1" method="post">
        <header>Registration Options</header>
        <br/>
        <label for="Reg_type1" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type1" value="1"/>
        Registering myself with credit card or bank account
        </label>
        <br>
        <label for="Reg_type2" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type2" value="2"/>
        Registering multiple people using credit card or bank account
        </label>
        <br>
        <label for="Reg_type3" class="checkbox">
            <input type="radio" name="Reg_type" id="Reg_type3" value="3"/>
        Registering using a purchase order
        </label>
        <div class="form-actions">
            <button class="btn" type="submit">Continue</button><span class="help-inline" style="display:none;">Please choose an option</span>
        </div>
    </form>             
  </div>
  <div class="tab-pane" id="information">...</div>
  <div class="tab-pane" id="payment">...</div>
</div>

And then my jquery:

var val1 = $('#frmtype1').validate({
$('#myTab a[href="#information"]').tab('disabled'); //i have no idea how to prevent the user from navigating here so I just put disabled. Didn't work obviously
$('#myTab a[href="#payment"]').tab('disabled');
    errorPlacement: function(error, element) {}, //this is to prevent the standard error message from showing, rather you use the inline-text
    rules: {
        'Reg_type': {
            required: true
        }
    }
});

$('#frmtype1').submit(function(e) {
    /*This will validate the first page, if the user didn't select an option then it will display
    the inline text as an error message*/
    if(val1.form()) {
        $('.help-inline').hide();

    } else {
        $('.help-inline').show();
        return false;
    }
});

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

So first things first, how do I disable the succeeding tabs until the current tab’s form is validated to true?

Answer 1

Based on the default tabs from Twitter Bootstrap, my approach would be to activate the tab plugin only when needed (because a tab is actually disabled unless you activate it) :

function activateTab(selector) {
    $(selector).on('click.twbstab',function() { $(this).tab('show'); })
        .closest('.disabled').removeClass('disabled');
}

activateTab('#myTab a:first');

And then you can use your validation process to activate the tabs.

Check the demo on jsfiddle. I used an additional class to show that a tab is disabled.

<ul class="nav nav-tabs" id="myTab">
    <li class="disabled active"><a href="#home">Home</a></li>
    <li class="disabled"><a href="#profile">Profile</a></li>
    <li class="disabled"><a href="#messages">Messages</a></li>
    <li class="disabled"><a href="#settings">Settings</a></li>
</ul>

.nav-tabs li.disabled { color: grey; }
.nav-tabs li.disabled a:hover { border-color: transparent; }

You could also disable a tab after activation by using something like that :

function deactivateTab(selector) {
    $(selector).off('click.twbstab')
        .closest('li').addClass('disabled');
}