Click here to Skip to main content
15,895,084 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
C#
form.validate({
      doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
      errorElement: 'span', //default input error message container
      errorClass: 'help-block help-block-error', // default input error message class
      focusInvalid: false, // do not focus the last invalid input
      excluded: ':disabled',
      rules: {

          accountingSoftware: {
              required: true,
          },

          currency_list: {
              required: true,
              minlength: 1
          },

          reference: {
              required: true,
          },

          reference2: {
              required: true,
          },

          reference3: {
              required: true,
          },

          moreDetails: {
              required: true,
          },


          card_number: {
              required: true,
          },

          attachedToCard: {
              required: true,
              minlength: 1
          },
      },
     invalidHandler: function (event, validator) { //display error alert on form submit   
            success.hide();
            error.show();
            Metronic.scrollTo(error, -200);
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
        },

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



        submitHandler: function (form) {
            success.show();
            error.hide();
            //add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
        }

    });






    var handleTitle = function (tab, navigation, index) {
        var total = navigation.find('li').length;
        var current = index + 1;
        //// set wizard title
        //$('.step-title', $('#form_wizard_1')).text('Step ' + (index + 1) + ' of ' + total);
        // set done steps
        jQuery('li', $('#form_wizard_1')).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_wizard_1').find('.button-previous').hide();
        } else {
            $('#form_wizard_1').find('.button-previous').show();
        }

        if (current >= total) {
            $('#form_wizard_1').find('.button-next').hide();
            $('#form_wizard_1').find('.button-submit').show();
            displayConfirm();
        } else {
            $('#form_wizard_1').find('.button-next').show();
            $('#form_wizard_1').find('.button-submit').hide();
        }
        Metronic.scrollTo($('.page-title'));
    }

    // default form wizard
    $('#form_wizard_1').bootstrapWizard({
        'nextSelector': '.button-next',
        'previousSelector': '.button-previous',
        onTabClick: function (tab, navigation, index, clickedIndex) {
            return false;
            /*
            success.hide();
            error.hide();
            if (form.valid() == false) {
                return false;
            }
            handleTitle(tab, navigation, clickedIndex);
            */
        },
        onNext: function (tab, navigation, index) {
            success.hide();
            error.hide();

            //var isValid = false;
            //var hadError = false;
            //var tabs = $(".tab-pane");
            //var currentTab = tabs[index - 1];

            //var currentTabId = $('.tab-pane.active').attr('id');

            //var stepElements = $('"#'+currentTabId +'"').find('*');

            


            
            if (form.valid() == false) {

               // var stepElements = $(currentTabId).find('span');
                return false;
            }

            handleTitle(tab, navigation, index);
        },
        onPrevious: function (tab, navigation, index) {
            success.hide();
            error.hide();

            handleTitle(tab, navigation, index);
        },

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

    $('#form_wizard_1').find('.button-previous').hide();
    $('#form_wizard_1 .button-submit').click(function () {



        
    }).hide();
Posted
Comments
Mich1309 28-May-15 7:02am    
???
Sergey Alexandrovich Kryukov 28-May-15 11:59am    
Yes you can. Just do your validation.
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900