JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form role="form" method="POST" id="account-edit">
    <div class="box-body">
        <div class="form-group">
            <label for="address">Address</label>
            <input type="text" class="form-control" id="address" name="address" placeholder="Endereço"/>
        </div>
        <div class="form-group">
            <label for="telephone">Telephone</label>
            <input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telefone"/>
        </div>
        <div class="form-group">
            <label for="contact_email">Contact-email</label>
            <input type="email" class="form-control" id="email" name="contact_email" placeholder="E-mail"/>
        </div>
        <div class="form-group">
            <label for="website">Website</label>
            <input type="text" class="form-control" id="website" name="website" placeholder="Website"/>
        </div>
    </div>
    <div class="box-footer">
        <button type="submit" class="btn btn-primary">Update Info</button>
    </div>
</form>

CSS

.has-error input {
    border: 1px solid red;
}

JavaScript

$('#account-edit').validate({
    errorClass: "has-error",
    rules: {
        contact_email: {
            email: true
        }
    },
    messages: {
        contact_email: {
            email: 'Please enter a valid email format: name@domain'
        }
    },
    highlight: function (element, errorClass) {
        $(element).closest('.control-group').addClass(errorClass);
    },
    unhighlight: function (element, errorClass) {
        $(element).closest('.control-group').removeClass(errorClass);
    }
});