JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.css">
<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group select2-bootstrap-prepend">	<span class="input-group-addon"><i class=" icon-male"></i></span>

                        <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="lstColors" class="control-label">Favorite Colors:</label>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-3">
                    <div class="input-group select2-bootstrap-prepend">	<span class="input-group-addon"><i class=" icon-male"></i></span>

                        <select name="lstColors" id="lstColors" size="1" multiple="multiple" class="required ">
                            <option value="R">Red</option>
                            <option value="W">White</option>
                            <option value="B">Blue</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

JavaScript

$('form').validate({
        rules: {
            firstname: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
                $(element).closest('.form-group').find('i.fa').remove();
                $(element).closest('.form-group').append('<i class="fa icon-plane icon-2x form-control-feedback"></i>')
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                $(element).closest('.form-group').find('i.fa').remove();
                $(element).closest('.form-group').append('<i class="fa icon-plane icon-2x  form-control-feedback"></i>');
            }
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
    $("#lstColors").select2({
        placeholder: "Select a Color",
        width: "200px"
    });