JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
    <form>
      <fieldset>
        <legend>Legend</legend>
        <label>Label name</label>
        <input name="test" type="text" placeholder="Type something…"/>
        <button type="submit" class="btn">Submit</button>
      </fieldset>
    </form>

JavaScript

$("form").validate({
  rules: {
    test: {
      minlength: 3,
      required: true
    }
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      return $(value).popover("hide");
    });
    return $.each(errorList, function(index, value) {
      var _popover;
      console.log(value.message);
      _popover = $(value.element).popover({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
      });
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});