bootstrap-validator 多tab时 自动跳转到不通过校验的tab

最近在使用 bootstrap-validator ，头一次使用，好多都不会，记录一下；

首先问题场景是：  新增界面，点击 保存时会校验多个tab中的数据，需要自动跳转到未通过校验数据所在的tab。

   

 

参考资料 

bootstrapvalidator API   ：          http://bootstrapvalidator.votintsev.ru/settings/

简书：https://www.jianshu.com/p/d61e2087c339

 API：           error.field.bv   事件  触发条件是：该区域校验不通过。

简书 参考代码：

 .on('status.field.bv', function(e, data) {
            var $form     = $(e.target),
                validator = data.bv,
                $tabPane  = data.element.parents('.tab-pane'),
                tabId     = $tabPane.attr('id');
            
            if (tabId) {
                var $icon = $('a[href="#' + tabId + '"][data-toggle="tab"]').parent().find('i');

                // Add custom class to tab containing the field
                if (data.status == validator.STATUS_INVALID) {
                    $icon.removeClass('fa-check').addClass('fa-times');
                } else if (data.status == validator.STATUS_VALID) {
                    var isValidTab = validator.isValidContainer($tabPane);
                    $icon.removeClass('fa-check fa-times')
                         .addClass(isValidTab ? 'fa-check' : 'fa-times');
                }
            }
        });

主要实现代码：

	/**
	 * 校验
	 */
	function formValidator() {
		$('#editActionForm').bootstrapValidator({
			excluded:[":disabled"],
			group: '.rowGroup',
			message: '校验不通过',
			trigger: 'click focus input',
			feedbackIcons: { //提示图标
				valid: 'glyphicon glyphicon-ok',
				invalid: 'glyphicon glyphicon-remove',
				validating: 'glyphicon glyphicon-refresh'
			},
			fields: {
				"dataMap.dispcontaindocstate": {
					validators: {
						trigger:"change focus blur keyup",
						notEmpty: { // 非空校验+提示信息
							message: '包含单据状态不能为空'
						}
					}
				},
				"dataMap.express": {
					validators: {
						notEmpty: { // 非空校验+提示信息
							message: '物流名称不能为空'
						}
					}
				},
				 
				 //其他校验已省略
			}
		}).on('error.field.bv',  function(e, data) {//校验不通过时
               var $tabPane  = data.element.parents('.tab-pane');//获取tab
               var tabId     = $tabPane.attr('id');   //获取tabid
    	       $('a[href="#' + tabId + '"][data-toggle="tab"]').click();//跳转tab
              });
	}

 

经验总结：多看官方API。