JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="tabbable">
  <ul id="main_tabs" class="nav nav-tabs">
    <li> <a class="tab_header" href="#tab_todo" data-toggle="tab">TAB A</a>
    </li>
    <li class="active"> <a class="tab_header" href="#tab_contacts" data-toggle="tab">TAB B</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane" id="tab_todo">AAAA</div>
    <div class="tab-pane active" id="tab_contacts">
      <form id="myform">
        <div>
          <input id="id_field1" class="fillone" type="text" name="field1" />
          <div class="hide field field_error"></div>
        </div>
        <br/>
        <div>
          <input id="id_field2" class="fillone" type="text" name="field2" />
          <div class="hide field field_error"></div>
        </div>
        <br/>
      </form>
    </div>
    <div id="validation_summary" class="field_error"></div>
    <input type="submit" />
  </div>
</div>

CSS

#docs {
  display: block;
  position: absolute;
  bottom: 0;
}

div.field_error {
  color: red;
}

JavaScript

function mark_tab_header_error(form, element, is_error) {
    var id = $(form).find(element).closest('.tab-pane').attr('id');
    $(form).find(element).closest('.tabbable').find('.tab_header').each(function(index, value) {
      if ($(this).attr('href') == '#' + id) {
        if (is_error) $(this).css({
          color: 'red'
        });
        else $(this).removeAttr('style');
      }
    });
  }

  function validation_rules(form) {
    $.validator.addClassRules("fillone", {
      require_from_group: [1, ".fillone"]
    });

    var validator = $(form).bind("invalid-form.validate",
      function() {
        mark_tab_header_error(form, validator.lastElement, true);
      }).validate({
      errorPlacement: function(error, element) {
        var field_error = $(form).find('#id_' + element.attr('name')).siblings('.field_error');
        if (field_error.length > 0) {
          error.appendTo(field_error);
        }
        $(field_error).show();
      },
      invalidHandler: function() {
        $("#validation_summary").text(validator.numberOfInvalids() + " field(s) are invalid");
      },
      errorContainer: "#validation_summary",
      success: function() {
        mark_tab_header_error(form, validator.lastElement, false);
      }
    });
    return validator;
  }

  $(document).ready(function() {
    var validator = validation_rules('#myform');
    validator.form();

  });