How To Properly Validate Twitter's Bootstrap Form Placed On Several Tabs With Jquery Validate?

I have one form located on several Twitter's Bootstrap tabs:

and a solution a few comments down

$.validator.setDefaults({
    ignore: ""
});

Solution 2:

My solution to enable tabs

...
highlight: function(label) {
        $(label).closest('.control-group').addClass('error');

        $(".tab-content").find("div.tab-pane:hidden:has(div.error)").each( function(){
            var id = $(this).attr("id");
            $('#tabs a[href="#'+id+'"]').tab('show');
        });
},
...

Is necessary that you add this code to allow change tab by js

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target// activated tab
  e.relatedTarget// previous tab
});

Solution 3:

thanks for your code it solved most of my problem, except the part to navigate to first tab with error. I got around as follows:

varIsValid = true;

        // Validate Each Bootstrap tab
        $(".tab-content").find("div.tab-pane").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');

            varIsTabValid = $("#SomeForm").valid();

            if (!IsTabValid) {
                IsValid = false;
            }
        });

        // Show first tab with error
        $(".tab-content").find("div.tab-pane").each(function (index, tab) {
            var id = $(tab).attr("id");
            $('a[href="#' + id + '"]').tab('show');

            varIsTabValid = $("#SomeForm").valid();

            if (!IsTabValid) {
                returnfalse; // Break each loop
            }
        });

Solution 4:

Are these jQuery tabs you're using? You can deactivate all other tabs and gradually activate them while the submitted data on each form pass the validation. Disable them all but the first in your constructor and after each validation enable the next.

.tabs( "enable" , index )

Read more here.

You could also put one final validation method in the end and put all your content visible depending on the tabs so you can escape the reloading of the links.

Solution 5:

Building upon @juanmanuele's answer, this is how I managed to get it working with Bootstrap 3 tabs:

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');
    });
}

To place focus on the 1st input with error:

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
     e.target// activated tab

     $($(e.target).attr('href')).find("div.has-error :input:first").focus();

     //e.relatedTarget // previous tab
});

Share