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
        },

      },
      highlight: function(element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
      },
      success: function(element) {
        element
        .text('OK!').addClass('valid')
        .closest('.control-group').removeClass('error').addClass('success');
      }
    });

});