title: jQuery Validate not working on Bootstrap 3 tabbed form
body: <p>I have looked at this <a href="https://stackoverflow.com/a/19336409/2173793">question/answer</a>, and many more like it, but I still cant get my form validation to switch tabs or move to the tab with the error.</p>
  
  <p>Relevant jQuery:</p>
  
  <pre><code>$(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();
  
  });
  
  });
  </code></pre>
  
  <p>You can view it <a href="http://jsfiddle.net/renierdebruyn/cyPz6/3/" rel="noreferrer">here</a></p>
  
  <p>What am I missing?</p>
  
  <p>Can someone please help me? I cant get it to work.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Okay so I have moved some code around and played a bit:</p>
  
  <pre><code>$("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,
              },
  
          }
      });
  </code></pre>
  
  <p>All works well, except it stops at this line <code>if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {</code></p>
  
  <p>and if I swop it with <code>$(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) {</code> it stop as well... </p>
  
  <p>Updated <a href="http://jsfiddle.net/renierdebruyn/cyPz6/5/" rel="noreferrer">jsFiddle</a></p>
  
  <p>Why does it not go into the <code>.each</code> or th<code>if</code> ? </p>