JSFiddle - React, Tailwind, and code Playground

by Sambora

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 id="idCompanyReg" role="form" class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Reg Form</legend>
        <div class="form-group">
            <label for="name">Organization Name</label>
            <input id="name" name="name" placeholder="please enter name" class="form-control input-medium required" type="text" value="" />
        </div>
        <!-- <div class="form-group">
<label for="client_email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="icon-envelope"></i></span>
<input id="client_email" name="client[email]" class="required email form-control" placeholder="Your Email" type="text">
</div>
</div>
-->
        <div class="form-group">
            <label for="type">Type(select one)</label>
            <select id="type" name="type" class="form-control">
                <option class="form-control" value="">Select one</option>
                <option class="form-control" value="IT related company">IT related company</option>
                <option class="form-control" value="Hospital">Hospital</option>
                <option class="form-control" value="Educational Organization">Educational organizations</option>
                <option class="form-control" value="Other">Other</option>
            </select>
        </div>
        <div class="form-group">
            <label for="place">Place:</label>
            <input id="place" name="place" class="form-control" type="text" value="" />
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description"...

JavaScript

$(document).ready(function () {
    $("#idCompanyReg").validate({
        rules: {
            name: {
                required: true,
                minlength: 5,
                maxlength: 15
            },
            type: {
                required: true
            },
            place: {
                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");
            });
        }
    });
});