Tabbed Sliding Form

by ronnjoe

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.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">Create</a></li>
                <li class=""><a href="#information" data-toggle="tab">View</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="options">
                    <div class="well">
                        <form id="regForm" action="" name="regForm" method="post">
                            <fieldset>
                                <legend>Registration</legend>
                                <div class="form-group">
                                    <label for="inputEmail" class="control-label">Email*</label>
                                    <input type="email" class="form-control" id="inputEmail" placeholder="Email" required />
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword" class="control-label">Password*</label>
                                    <input type="password" class="form-control" id="inputPassword" placeholder="Password" required />
                                </div>
                                <div class="form-group">
                                    <button class="btn-demo btn" data-activate="#information">Submit</button>
                                    <span class="help-inline" style="display:none;">All fields are mandatory</span>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <!--/.well -->
                </div>
       ...

CSS

#tab-container {
    overflow:hidden;
}

JavaScript

var selector;
var selectorID;
activateTab('#myTab a:first');
function activateTab(selectorID) 
{
    $(selectorID).tab('show').closest('.disabled').removeClass('disabled');    
}
$('.btn-demo').on('click',function() {
    selector = '#myTab a[href="'+$(this).data('activate')+'"]';
    selectorID = $(selector).attr('href');
});
var val1 = $('#regForm').validate(
{
    errorPlacement: function(error, element) {}, 
    // prevent the standard error message from showing, rather you use the inline-text
    rules: {
        'Reg_type': {
            required: true
        }
    }
});
// validate form
$('#regForm').submit(function(e) 
{
    if(val1.form()) {
        $('.help-inline').hide();
        activateTab(selector);
    } 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);
});