JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://bootstrapformhelpers.com/assets/css/bootstrap-formhelpers.min.css">
<script src="https://bootstrapformhelpers.com/assets/js/bootstrap-formhelpers.min.js"></script>
<form id="Form" action="" role="form" method="post">
	<div class="col-sm-10">
		<div class="bfh-datepicker" id="StartTime" data-name="StartTime" data-format="d/m/y" data-date=""></div>
	</div>
	<div class="col-sm-2">
		<button type="submit" id="Filter" class="btn btn-primary btn-block" data-loading-text="Updating...">Insert</button>
	</div>
</form>

<div class="containerx" style="display:none;">
	<span></span>
</div>

CSS

body{
  margin: 20px;
}

JavaScript

$.validator.setDefaults({
					submitHandler: function() {
						form.submit()
					}
				});

				$().ready(function() {

					var container = $('div.containerx');

					$("#Form").validate({
						ignore: [],
            rules:{
            	StartTime: {
              	required: true
              }
            },
						messages: {
							StartTime: {
								required: "Select the StartTime."
							}
						},
						errorContainer: container,
						errorLabelContainer: $("span", container),

						highlight: function ( element, errorClass, validClass ) {
							$(element).addClass("btn-danger");
							$('#Filter').addClass( "btn-danger" );
						},
						unhighlight: function ( element, errorClass, validClass ) {
							$(element).addClass("btn-danger");
							$('#Filter').removeClass( "btn-danger" );
						}
					});
				});