JSFiddle - React, Tailwind, and code Playground

by houmie

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();

  });