JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container ">
    <form id="contact-form" action="" class="form-horizontal jumbotron ">
        <div class="form-group">
            <label class="col-sm-3 control-label">Institute Name</label>
            <div class="col-sm-5 controls">
                <input type="text" class="form-control" name="name" id="name" placeholder="Enter Institute Name">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">District</label>
            <div class="col-md-4">
                <select name="country" id="country" class="form-control">
                    <option>--Please Select--</option>
                    <option>India</option>
                    <option>United States</option>
                    <option>Canada</option>
                    <option>United Kingdom</option>
                    <option>Others</option>
                </select>
            </div>
        </div>
        <div class="form-actions">
            <div class="col-sm-offset-5 col-sm-2 center">
                <button type="type=" submit "" id="done" class="btn btn-default">Sign in</button>
            </div>
        </div>
    </form>
</div>

CSS

label.valid {
    width: 24px;
    height: 24px;
    display: inline-block;
    text-indent: -9999px;
}
label.error {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}

JavaScript

$(document).ready(function () {

    $('#contact-form').validate({
        rules: {
            name: {
                minlength: 2,
                required: true
            }
        },
        errorElement: "span",
        errorClass: "help-block",
        highlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

});