How to validate a twitter bootstrap form wizard

Question

I am using twitter bootstrap and want to combine form wizard with validation. But after trying very much the form wizard and validation is not working on next botton. Where I am making mistake. My coding is below

<div class="portlet-body form">
                        <form action="#" id="form_sample_2" class="form-horizontal">
                           <div class="form-wizard">
                              <div class="navbar steps">
                                 <div class="navbar-inner">
                                    <ul class="row-fluid nav nav-pills">
                                       <li class="span3 active">
                                          <a href="#tab1" data-toggle="tab" class="step active">
                                          <span class="number">1</span>
                                          <span class="desc"> Registration</span>   
                                          </a>
                                       </li>
                                       <li class="span3">
                                          <a href="#tab2" data-toggle="tab" class="step">
                                          <span class="number">2</span>
                                          <span class="desc"> Review Application</span>   
                                          </a>
                                       </li>
                                     </ul>
                                 </div>
                              </div>
                              <div id="bar" class="progress progress-success progress-striped">
                                 <div class="bar" style="width: 25%;"></div>
                              </div>
                              <div class="tab-content background-color-blue">
                                 <div class="tab-pane active" id="tab1">
                                    <h3 class="block">Registration</h3>
                                    <div class="control-group">
                                       <label class="control-label">UserName:</label>
                                       <div class="controls span8">
                                          <input type="text" data-required="1" name="username" id="username" value="user" class="span6 m-wrap">
                                          <span class="help-inline">UsernameTip</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">PassWord:</label>
                                       <div class="controls span8">
                                          <input type="password" data-required="1" name="password" id="password" value="password" class="span6 m-wrap">
                                          <span class="help-inline">{L_PassWordTip}</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">ConfirmPassWord:</label>
                                       <div class="controls span8">
                                          <input type="password" data-required="1" name="password2" id="password2" value="password2" class="span6 m-wrap">
                                          <span class="help-inline">ConfirmPassWordTip</span>
                                       </div>
                                    </div>                                
                                 </div>
                                 <div class="tab-pane" id="tab2">
                                    <h3 class="block">AppReview</h3>
                                     <div class="control-group">
                                       <label class="control-label">Entered UserName:</label>
                                       <div class="controls span8">
                                          <span class="text" id="username_pr"></span>
                                       </div>
                                     </div>
                                    <div class="control-group">
                                       <label class="control-label">Entered PassWord:</label>
                                       <div class="controls span8">
                                          <span class="text">**Hidden**</span>
                                       </div>
                                    </div>
                              </div>
                              <div class="clearfix">
                                 <a href="javascript:;" class="btn btn-large btn-info button-previous" style="display: none;">
                                 <i class="m-icon-swapleft m-icon-white"></i> Back 
                                 </a>
                                 <a href="javascript:;" onclick="submit" class="btn btn-large btn-info button-next">
                                 Continue <i class="m-icon-swapright m-icon-white"></i>
                                 </a>
                                 <a href="javascript:;" class="btn btn-large btn-success button-submit" style="display: none;">
                                 Submit <i class="m-icon-swapright m-icon-white"></i>
                                 </a>
                              </div>
                           </div>
                        </form>
                     </div>

<script type="text/javascript">
var FormWizard = function () {


    return {
        //main function to initiate the module
        init: function () {
            if (!jQuery().bootstrapWizard) {
                return;
            }

            // default form wizard
            $('#form_sample_2').bootstrapWizard({
                'nextSelector': '.button-next',
                'previousSelector': '.button-previous',
                onTabClick: function (tab, navigation, index) {
                    alert('on tab click disabled');
                    return false;
                },

                onNext: function (tab, navigation, index) {
                    var total = navigation.find('li').length;
                    var current = index + 1;
                    // set wizard title
                    $('.step-title', $('#form_sample_2')).text('Step ' + (index + 1) + ' of ' + total);
                    // set done steps
                    jQuery('li', $('#form_sample_2')).removeClass("done");
                    var li_list = navigation.find('li');
                    for (var i = 0; i < index; i++) {
                        jQuery(li_list[i]).addClass("done");
                    }

                    if (current == 1) {
                        $('#form_sample_2').find('.button-previous').hide();
                    } else {
                        $('#form_sample_2').find('.button-previous').show();
                    }

                    if (current >= total) {
                        $('#form_sample_2').find('.button-next').hide();
                        $('#form_sample_2').find('.button-submit').show();
                    } else {
                        $('#form_sample_2').find('.button-next').show();
                        $('#form_sample_2').find('.button-submit').hide();
                    }
                    App.scrollTo($('.page-title'));
                },
                onPrevious: function (tab, navigation, index) {
                    var total = navigation.find('li').length;
                    var current = index + 1;
                    // set wizard title
                    $('.step-title', $('#form_sample_2')).text('Step ' + (index + 1) + ' of ' + total);
                    // set done steps
                    jQuery('li', $('#form_sample_2')).removeClass("done");
                    var li_list = navigation.find('li');
                    for (var i = 0; i < index; i++) {
                        jQuery(li_list[i]).addClass("done");
                    }

                    if (current == 1) {
                        $('#form_sample_2').find('.button-previous').hide();
                    } else {
                        $('#form_sample_2').find('.button-previous').show();
                    }

                    if (current >= total) {
                        $('#form_sample_2').find('.button-next').hide();
                        $('#form_sample_2').find('.button-submit').show();
                    } else {
                        $('#form_sample_2').find('.button-next').show();
                        $('#form_sample_2').find('.button-submit').hide();
                    }

                    App.scrollTo($('.page-title'));
                },
                onTabShow: function (tab, navigation, index) {
                    var total = navigation.find('li').length;
                    var current = index + 1;
                    var $percent = (current / total) * 100;
                    $('#form_sample_2').find('.bar').css({
                        width: $percent + '%'
                    });
                }
            });

            $('#form_sample_2').find('.button-previous').hide();
            $('#form_sample_2 .button-submit').click(function () {
                alert('Finished! Hope you like it :)');
            }).hide();
        }

    };

}();
</script>

<script type="text/javascript">
var FormValidation = function () {


    return {
        //main function to initiate the module
        init: function () {

            //Sample 2
            var form2 = $('#form_sample_2');
            var error2 = $('.alert-error', form2);
            var success2 = $('.alert-success', form2);
            form2.validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-inline', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",
                rules: {
                    username: {
                        minlength: 5,
                        maxlength: 32,
                        required: true
                    },
                    password:{
                        minlength: 4,
                        maxlength: 32,
                        required:true
                    },
                    password2:{
                        required:true,
                        equalTo:password
                    },
                },


                errorPlacement: function (error, element) { // render error placement for each input type
                        error.insertAfter(element); // for other inputs, just perform default behavoir
                },

                invalidHandler: function (event, validator) { //display error alert on form submit   
                    success2.hide();
                    error2.show();
                    App.scrollTo(error2, -200);
                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.help-inline').removeClass('ok'); // display OK icon
                    $(element)
                        .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group

                },

                unhighlight: function (element) { // revert the change dony by hightlight
                    $(element)
                        .closest('.control-group').removeClass('error'); // set error class to the control group
                },

                success: function (label) {
                        label
                        .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                        .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
                },

                submitHandler: function (form) {
                    success2.show();
                    error2.hide();
                }

            });

        }

    };

}();
</script>


<script src="js/chosen.jquery.min.js"></script>
<script src="js/plugins/wizard-master/jquery.bootstrap.wizard.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>

Answer 1

Assigning an id to

<div class="form-wizard" id="form2_steps">

And replace $('#form_sample_2').bootstrapWizard with $('#form2_steps').bootstrapWizard and other with this "form2_steps" After: onNext: function (tab, navigation, index) { add this coding:

var $valid = $("#form_sample_2").valid();
                if(!$valid) {
                    form2.focusInvalid();
                    return false;
                } 

Complete solution in a combined script is here:

<script type="text/javascript">         
var FormValidation = function () {

    return {        
        init: function () {
                //Sample 2
                var form2 = $('#form_sample_2');
                var error2 = $('.alert-error', form2);
                var success2 = $('.alert-success', form2);

                form2.validate({
                errorElement: 'span', //default input error message container
                focusInvalid: true, // do not focus the last invalid input
                ignore: ':hidden',
                rules: {
                    username: {
                        minlength: 5,
                        maxlength: 32,
                        required: true
                    },
                    password:{
                        minlength: 4,
                        maxlength: 32,
                        required:true
                    },
                    password2:{
                        required:true,
                        equalTo:password
                    },
                },


                errorPlacement: function (error, element) { // render error placement for each input type
                        error.insertAfter(element); // for other inputs, just perform default behavoir
                },

                invalidHandler: function (event, validator) { //display error alert on form submit   
                    success2.hide();
                    error2.show();
                    App.scrollTo(error2[0], -200);
                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.help-inline').removeClass('ok'); // display OK icon
                    $(element)
                        .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group

                },

                unhighlight: function (element) { // revert the change dony by hightlight
                    $(element)
                        .closest('.control-group').removeClass('error'); // set error class to the control group
                },

                success: function (label) {
                        label
                        .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                        .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
                },

                submitHandler: function (form) {
                    success2.show();
                    error2.hide();
                }

            });

        }

    };

}();

var FormWizard = function () {


    return {
        //main function to initiate the module
        init: function () {
            if (!jQuery().bootstrapWizard) {
                return;
            }

            // default form wizard
            $('#form2_steps').bootstrapWizard({
                'nextSelector': '.button-next',
                'previousSelector': '.button-previous',
                onTabClick: function (tab, navigation, index) {
                    alert('on tab click disabled');
                    return false;
                },

                onNext: function (tab, navigation, index) {
                    var $valid = $("#form_sample_2").valid();
                    if(!$valid) {
                        form2.focusInvalid();
                        return false;
                    }                    
                    var total = navigation.find('li').length;
                    var current = index + 1;

                    // set wizard title
                    $('.step-title', $('#form2_steps')).text('Step ' + (index + 1) + ' of ' + total);
                    // set done steps
                    jQuery('li', $('#form2_steps')).removeClass("done");
                    var li_list = navigation.find('li');
                    for (var i = 0; i < index; i++) {
                        jQuery(li_list[i]).addClass("done");
                    }
                    // Make sure we entered the name

                    if (current == 1) {
                        $('#form2_steps').find('.button-previous').hide();
                    } else {
                        $('#form2_steps').find('.button-previous').show();
                    }

                    if (current >= total) {
                        $('#form2_steps').find('.button-next').hide();
                        $('#form2_steps').find('.button-submit').show();
                    } else {
                        $('#form2_steps').find('.button-next').show();
                        $('#form2_steps').find('.button-submit').hide();
                    }
                    App.scrollTo($('.page-title'));
                },
                onPrevious: function (tab, navigation, index) {
                    var total = navigation.find('li').length;
                    var current = index + 1;
                    // set wizard title
                    $('.step-title', $('#form2_steps')).text('Step ' + (index + 1) + ' of ' + total);
                    // set done steps
                    jQuery('li', $('#form2_steps')).removeClass("done");
                    var li_list = navigation.find('li');
                    for (var i = 0; i < index; i++) {
                        jQuery(li_list[i]).addClass("done");
                    }

                    if (current == 1) {
                        $('#form2_steps').find('.button-previous').hide();
                    } else {
                        $('#form2_steps').find('.button-previous').show();
                    }

                    if (current >= total) {
                        $('#form2_steps').find('.button-next').hide();
                        $('#form2_steps').find('.button-submit').show();
                    } else {
                        $('#form2_steps').find('.button-next').show();
                        $('#form2_steps').find('.button-submit').hide();
                    }

                    App.scrollTo($('.page-title'));
                },
                onTabShow: function (tab, navigation, index) {
                    var total = navigation.find('li').length;
                    var current = index + 1;
                    var $percent = (current / total) * 100;
                    $('#form2_steps').find('.bar').css({
                        width: $percent + '%'
                    });
                }
            });

            $('#form2_steps').find('.button-previous').hide();
            $('#form2_steps .button-submit').click(function () {
                alert('Finished! Hope you like it :)');
            }).hide();
        }
    };

}();
</script>