JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<form id="form1">
    <div>
        <input type="text" name="txtSPStatusComments" />
    </div>
    <br/>
    <input type="submit" value="Input Submit" />
    <br/>
    <br/>
    <button type="submit">Submit Button</button>
</form>

JavaScript

$(document).ready(function () {

    $("#form1").validate({
        rules: {
            txtSPStatusComments: {
                required: true
            }
        },
        messages: {
            txtSPStatusComments: {
                required: "Status is a required field!"
            }
        },
        highlight: function (e) {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },
        unhighlight: function (e) {
            $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element.parent());
        }
    });

});