jQuery Validate not working on Bootstrap 3 tabbed form

Question

I have looked at this question/answer, and many more like it, but I still cant get my form validation to switch tabs or move to the tab with the error.

Relevant jQuery:

$(document).ready(function () {

$("form[name=modify]").validate({
    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,
        },
        highlight: function (label) {
            $(label).closest('.control-group').addClass('has-error');
            console.log($(label).closest('.control-group').addClass('has-error'));
            if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) {
                $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
                    var id = $(tab).attr("id");

                    $('a[href="#' + id + '"]').tab('show');
                });
                $('#myTab').on('shown', function (e) {
                    console.log(this);
                    e.target // activated tab
                    $($(e.target).attr('href')).find("div.has-error :input:first").focus();
                });
            }
        },
    }
});
$("[type=submit]").submit(function (e) {
    e.preventDefault();

});

});

You can view it here

What am I missing?

Can someone please help me? I cant get it to work.

UPDATE:

Okay so I have moved some code around and played a bit:

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

            });
        },
        invalidHandler : function(event, validator) {
            // 'this' refers to the form
            $('#myTab').on('shown', function(e) {
                console.log(this);
                e.target;// activated tab
                $($(e.target).attr('href')).find("fieldset.has-error :input:first").focus();
            });
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
                $("div.has-error span").html(message);
                $("div.has-error").show();
            } else {
                $("div.has-error").hide();
            }
        },
        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,
            },

        }
    });

All works well, except it stops at this line if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {

and if I swop it with $(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) { it stop as well...

Updated jsFiddle

Why does it not go into the .each or thif ?

Answer 1

I think your trouble might be that jquery by default will only validate visible fields. So what you need to do is tell jquery to not ignore your hidden fields (other tabs). This can be done as follows.

$("#form1").validate({ ignore: "" });

By default, ignore :hidden. See this answer, and this documentation (Options -> Ignore).

Answer 2

$("form").on('submit', function () {
    var isValid = $(this).valid();
    if (this.hasChildNodes('.nav.nav-tabs')) {
        var validator = $(this).validate();
        $(this).find("input").each(function () {
            if (!validator.element(this)) {
                isValid = false;
                $('a[href=#' + $(this).closest('.tab-pane:not(.active)').attr('id') + ']').tab('show');
                return false;
            }
        });
    }
    if (isValid) {
        // do stuff
    }
});