show error in each bootstrap tabs using jquery validation

Question

I validate my form in bootstrap tabs using jquery validation plugin like this :

JS:

$(document).ready(function () {

    $("form[name=modify]").validate({
        highlight: function (label) {
            $(label).closest('.form-group').addClass('has-error');
            var fieldset = $(label).parent().parent().parent().parent().parent().parent().parent();
            if ($(fieldset).find("fieldset.tab-pane.active:has(div.has-error)").length == 0) {
                $(fieldset).find("fieldset.tab-pane:has(div.has-error)").each(function (index, tab) {
                    var id = $(tab).attr("id");
                    $('a[href="#' + id + '"]').tab('show');
                });

            }

        },

        debug: true,
        ignore: [],
        rules: {
            first_name: {
                required: true,
            },
            surname: {
                required: true
            },
            id_number: {
                required: true
            },
            mobile_number: {
                number: true,
                minlength: 10,
            },
            home_number: {
                number: true,
                minlength: 10,
            },
            other_contact: {
                number: true,
                minlength: 10,
            },
            line1: {
                required: true,
            },
            city_town: {
                required: true,
            },
            postal_code: {
                required: true,
                minlength: 4,
            },
            curr_renumeration: {
                required: true,
                number: true,
            },
            expect_renumeration: {
                required: true,
                number: true
            },
            email: {
                email: true,
                required: true,
            },

        }
    });
    $("[type=submit]").submit(function (e) {
        e.preventDefault();

    });

});

In action jquery validation plugin worked and validated all tabs and show error bottom of each input. I need to show alert or highlight title of tabs (ie : Address Details), if in tabs was an error.
How do can I show this alert or highlight error in title tabs?

DEMO HERE

Answer 1

You should add invalidHandler as a parameter of the Validate method, something like this:

invalidHandler: function(form, validator) {
    var formId = validator.errorList[0].element.closest('fieldset').id;
    var tab = $('[href="#' + formId + '"]');
    $(tab).css('color','red');
}

or any other error effect you want.