How to properly validate Twitter's Bootstrap form placed on several tabs with jQuery Validate?

Question

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

<form id="personal-data" class="form-horizontal">
  <div class="tabbable">
    <ul id="tab" class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
      <!-- ... -->
    </ul>

    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade active in" id="home">
        <fieldset>
          <div class="control-group">
            <div class="controls">
              <input type="text" id="field1">
            </div>
          </div>
        </fieldset>
      </div>
      <div class="tab-pane fade" id="profile">
        <fieldset>
          <div class="control-group">
            <div class="controls">
              <input type="text" id="field2">
            </div>
          </div>
        </fieldset>          
      </div>

When I validate the form with jQuery validate on active tab and field with invalid value is on the same tab, then validation fails (which is correct). But when I am on one tab and invalid value is on another tab, then validation returns true, which is incorrect. How can I fix it? How can I highlight that field on another tab?

Please see this demo (just press button next - it will show error message, then go to last tab and press finish there).

Answer 1

I think your problem lies in the fact that validation occurs in visible elements only.

Reading this issue we see that on version 1.9

Fixed #189 - :hidden elements are now ignored by default

and a solution a few comments down

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

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

Answer 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:

        var IsValid = 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');

            var IsTabValid = $("#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');

            var IsTabValid = $("#SomeForm").valid();

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