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>
<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/>
  <input type="submit" />
</form>
<div id="validation_summary" class="field_error"></div>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

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

div.field_error{
	color: red;
}

JavaScript

$(document).ready(function () {

  var validator = validation_rules('#myform');
  validator.form();

  function validation_rules(form) {

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

    var validator = $(form).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"

    });
    return validator;
  }

});