Tabbed Sliding Form

by js_test

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">Tab One</a></li>
                <li class="disabled"> <a href="#information" data-toggle="tab">Tab Two</a>

                </li>
                <li class="disabled"> <a href="#payment" data-toggle="tab">Tab Three</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" />Option No. 1</label>
                                <br>
                                <label for="Reg_type2" class="radio">
                                    <input type="radio" name="Reg_type" id="Reg_type2" value="2" />Option No. 2</label>
                                <br>
                                <label for="Reg_type3" class="radio">
                                    <input type="radio" name="Reg_type" id="Reg_type3" value="3" />Option No. 3</label>
                            </fieldset>
                            <button class="btn-demo btn" data-activate="#information">Continue</button> <span class="help-inline" style="display:none;">Please choose an...

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({...