JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<form action='' method='post' id='countersForm'>
    <p>
        <input type="text" class="counter_input active" id="id-88" name="88" />
    </p>
    <p>
        <input type="text" class="counter_input active" id="id-89" name="89" />
    </p>
    <p>
        <input type='submit' />
    </p>
</form>

CSS

.active {
    border: 1px solid #158EE3;
}
.counter_input {
    background-color: #F4F4F4;
    box-shadow: 0 1px 5px #CCCCCC inset, 0 -1px 0 rgba(0, 0, 0, 0.05);
    font-size: 40px;
    width: 120px;
    margin-bottom: 5px;
}
.error {
    border: 1px solid #FFA500;
}

.error.message {
    padding: 5px;
    background-color: #FF7777;
}

JavaScript

$(document).ready(function(){
	$("#countersForm").validate({
		debug: true,
		validClass: "active",
		highlight: function(element, errorClass, validClass) {
			$(element).addClass(errorClass).removeClass(validClass);
			$(element.form).find("label[for=" + element.id + "]").addClass(errorClass).addClass('message');
		},
		unhighlight: function(element, errorClass, validClass) {
			$(element).removeClass(errorClass).addClass(validClass);
			$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass).removeClass('message');
		},
		errorPlacement: function (error, element) {
			console.log(error);
			var br = $( "<br>" );
			error.insertAfter(element).addClass('message');
			br.insertAfter(element);
		}
		
	});
	$("input").each(function () {
		$(this).rules("add", {
			required: true,
			digits: true,
			messages: {
				required: 'It is required',
				digits: 'Only digits can be there'
			}
		});
	});
});