如何在特定选项卡内进行验证 [英] How Can I Make Validation Inside Specific Tab

问题描述

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();

推荐答案

（element）
.closest（' 。form-group'）。removeClass（< span class =code-string>' has-success'）。addClass（'' has-error'）; // 将错误类设置为控制组
}，

unhighlight：function（element）{ // 还原hightlight所做的更改

(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

（元素）
.closest（' .form-group'） .removeClass（' has-error'）; // 将错误类设置为控制组
}，



submitHandler：function（form）{
success.show（）;
error.hide（）;
// 在这里添加一些ajax代码来提交表单或者如果你想要调用form.submit（）提交没有ajax的表格
}

}）;






var handleTitle = function（制表符，导航，index）{
var total = navigation.find（' 利'）长度。
var current = index + 1 ;
/// / set wizard title
//

(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'，

('.step-title',

这篇关于如何在特定选项卡内进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！