Tabbed Sliding Form

by manoj

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css">
<div class="container">
    <div class="row">
        <div id="tab-container" class="span6 offset1">
        <ul class="nav nav-tabs" id="myTab">
              <li class="active"><a href="#options" data-toggle="tab">Options</a></li>
              <li class="disabled"><a href="#information" data-toggle="tab">Information</a></li>
              <li class="disabled"><a href="#payment" data-toggle="tab">Payment</a></li>
            </ul>
            
            <div class="tab-content">
                <div class="tab-pane active" id="options">
                    <div class="well">
                    <form id="frmtype1" action="" name="frmtype1" method="post">
                        <fieldset>
                            <legend>Registration Options</legend>

                            <label for="Reg_type1" class="radio">
                            <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="radio">
                            <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="radio">
                            <input type="radio" name="Reg_type" id="Reg_type3" value="3"/>
                        Registering using a purchase order
                        </label>
                        </fieldset>
                        ...

CSS

#tab-container {
    overflow:hidden;
}

JavaScript

var selector;
var selectorID;

activateTab('#myTab a:first');

function activateTab(selectorID) 
{
    $(selectorID).tab('show')
        .closest('.disabled').removeClass('disabled');    
}

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

$('.btn-demo').on('click',function() {
    selector = '#myTab a[href="'+$(this).data('activate')+'"]';
    selectorID = $(selector).attr('href');
});

var val1 = $('#frmtype1').validate(
{
    errorPlacement: function(error, element) {}, 
    // prevent the standard error message from showing, rather you use the inline-text
    rules: {
        'Reg_type': {
            required: true
        }
    }
});

// validate 1st form
$('#frmtype1').submit(function(e) 
{
    // validate the first page
    if(val1.form()) {
        $('.help-inline').hide();
        activateTab(selector);
    } else {
        $('.help-inline').show();
    }
    return false;
});

// validate 2nd form
$('#frmtype2').submit(function(e) 
{
    // validate the second page
    activateTab(selector);
    return false;
});


// if 2nd or 3rd tab is clicked, validate as if the form was submitted
$('#myTab li:eq(1) a, #myTab li:eq(2) a').click(function(e) 
{
    selectorID = $(this).attr('href');
    // validate the first page
    if(val1.form()) {
        $('.help-inline').hide();
        activateTab(this);
        $(selectorID).tab('show');
    } else {
        $('.help-inline').show();
    }
    return false;
});

// re-position all tab-panes, except the active pane, so that they are prepared for the slide effect
$(".tab-pane").css("position", "relative");
$(".tab-pane").not(".active").animate({
    left: "1000px"
});

// perform slide effect
$('a[data-toggle="tab"]').on('show', function (e) {
    lastPane = $(e.relatedTarget).attr('href');
    $(lastPane).animate({left: "1000px"}, 300)
    currPane = $(e.target).attr('href');
    $(currPane).animate({left: "0px"}, 300);
});