JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/skins/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.js"></script>
<div class="row">
  <div class="col-xs-12">
    <div class="box box-danger">
      <div class="box-header">
        <h3 class="box-title">Edit Draft</h3>
      </div>
      <form role="form" method="POST" action="#" name="ovrseastrvlrqst" id="ovrseastrvlrqst" class="form-horizontal bv-form" novalidate="novalidate">
        <button type="submit" class="bv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
        <div class="box-body">
          <div class="form-group">
            <div class="col-xs-3">
              <label for="trvlreqapldt" class="pull-right">Apply Date
                <p class="text-red pull-right">*</p>
              </label>
            </div>
            <div class="col-xs-3">
              <div class="lnbrd">
                <div class="input-group">
                  <div class="input-group-addon">
                    <span...

JavaScript

var currencyvalidator,projnovalidator,custmrnamevalidator,custmrnamevalidator,projectoptionvalidator,fundamountvalidator;
$(function() {
  $('#trvlreqapldt').datepicker({
    format: 'dd-mm-yyyy',
    autoclose: true,
    todayHighlight: true,
    startDate: '+0d'
  }).on('changeDate', function(e) {
    $('#ovrseastrvlrqst').bootstrapValidator('revalidateField', 'trvlreqapldt');
  });
  $('#datepicker-container .input-daterange').datepicker({
    format: 'dd-mm-yyyy',
    autoclose: true,
    todayHighlight: true,
    startDate: '+0d',
    beforeShowDay: function(date) {
      if (date.getMonth() == (new Date()).getMonth())
        switch (date.getDate()) {
          case 8:
            return false;
        }
    }
  }).on('changeDate', function(e) {
    $('#ovrseastrvlrqst').bootstrapValidator('revalidateField', 'start');
    $('#ovrseastrvlrqst').bootstrapValidator('revalidateField', 'end');
  });
  $("input[type='checkbox']:not(.simple), input[type='radio']:not(.simple)").iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
  });
  currencyvalidator = {
    group: '.lnbrd',
    validators: {
      notEmpty: {
        message: 'The Currency is required and cannot be empty'
      }
    }
  },
  projnovalidator = {
    group: '.lnbrd',
    validators: {
      notEmpty: {
        message: 'The Project Number is required and cannot be empty'
      },
      stringLength: {
        max: 30,
        message: 'The Project Number must be less than 30 characters long'
      }
    }
  },
  custmrnamevalidator = {
    group: '.lnbrd',
    validators: {
      notEmpty: {
        message: 'The Customer Name is required and cannot be empty'
      },
      stringLength: {
        max: 50,
        message: 'The Customer Name must be less than 50 characters long'
      }
    }
  },
  projectoptionvalidator = {
    group: '.lnbrd',
    validators: {
      notEmpty: {
        message: 'The Option is required and cannot be empty'
      }
    }
  },
 ...