Guidance bootstrap validator not work with nav nav-tabs

Question

Guidance bootstrap validator not work with nav nav-tabs help me

I've created a form that is divided in 4 tabs, and i've added the bootstrap validator to the form to test the validity on the input.

On this jsfiddle.net i've recreated part of the form.

When you press submit without entering any data into the form, it will display the X symbol and color the input red.

Answer 1

.on('status.field.bv', function(e, data) {
        var $form     = $(e.target),
            validator = $form.data('bootstrapValidator'),
            $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');
            }
        }
});