Validação (Tabs + Validation)

Validação usando jQuery UI Tabs + jQuery Validation

by gsguma

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css">
 <h3>Tabs and Validation Demo</h3>
<form id="validatetabs" method="get" action="">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
      A required field: <input id="inp1" name="inp1" class="required" type="text"/>
    <br/>
      Another required field: <input id="inp1a" name="inp1a" class="required" type="text"/>
    </div>
    <div id="tabs-2">
      A required field: <input id="inp2" name="inp2" class="required" type="text"/>
    <br/>
      Another required field: <input id="inp2a" name="inp2a" class="required" type="text"/>
    </div>
    <div id="tabs-3">
      A required field: <input id="inp3" name="inp3" class="required" type="text"/>
    <br/>
      Another required field: <input id="inp3a" name="inp3a" class="required" type="text"/>
    </div>
  </div>
  <p>
      <input id="submitForm" class="submit" type="submit" value="Submit"/>
  </p>
</form>

CSS

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
 html { font-size: 64.5%; }
 label.error {color: red; }

JavaScript

$("#tabs").tabs();
$("#submitForm").button();
$("#validatetabs").validate({
  submitHandler: function(form) {
    alert("submitted!"); 
  },
  invalidHandler: function(form, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
      var invalidPanels = $(validator.invalidElements()).closest(".ui-tabs-panel", form);
      if (invalidPanels.size() > 0) {
        $.each($.unique(invalidPanels.get()), function(){
          $(this).siblings(".ui-tabs-nav")
            .find("a[href='#" + this.id + "']").parent().not(".ui-tabs-selected")
              .addClass("ui-state-error")
              .show("pulsate",{times: 3});
        });
      }
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass);
    $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
    var $panel = $(element).closest(".ui-tabs-panel", element.form);
    if ($panel.size() > 0) {
      if ($panel.find("." + errorClass + ":visible").size() == 0) {
        $panel.siblings(".ui-tabs-nav").find("a[href='#" + $panel[0].id + "']")
          .parent().removeClass("ui-state-error");
      }
    }
  }
});