JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<div class="container ">

    <form id="miForm" method="post" enctype="multipart/form-data" class="form-horizontal">

        <div class="row">
            <div class="col-md-2">
                <input class="form-control" id="dni" name="dni" type="text" placeholder="Dni" />
            </div>

            <div class="col-md-2">
                <input class="form-control" id="historiaclinica" name="historiaclinica" type="text" placeholder="Historia Clinica" />
            </div>

            <div class="col-md-2">
                <input class="form-control" id="cuil" name="cuil" type="text" placeholder="Cuil" />
            </div>
        </div>
		<input type="submit" />
    </form>

</div>

CSS

input[type="text"].claserror {
    color: #DF0101;
    background-color: #DF0101;
}

erele.claserror {
    color: #DF0101;
}

JavaScript

$(document).ready(function() {

    $("#miForm").validate({
        errorClass: "claserror",
        validClass: "clasevalida",
        errorElement: 'erele',
        rules: {
            nombre: {
                required: true,
                lettersonly: true,
                maxlength: "20"
            },
            razon_social: {
                required: true,
                lettersonly: true,
                maxlength: "25"
            },
            especialidad: {
                required: true
            },
            matriculaprovincial: {
                required: true,
                maxlength: "20"
            },
            matriculanacional: {
                required: true,
                maxlength: "20"
            },
            apellido: {
                required: true,
                lettersonly: true,
                maxlength: "20"
            },
            dni: {
                required: true,
                digits: true,
                minlength: "8",
                maxlength: "8"
            },
            cuil: {
                required: true,
                digits: true,
                minlength: "10",
                maxlength: "11"
            },
            nacimiento: {
                required: true,
                date: true
            },
            correo: {
                email: true
            },
            direccion: {
                required: true,
                maxlength: "25"
            },
            telefono: {
                required: true,
                digits: true,
                maxlength: "20"
            },
            celular: {
                digits: true,
                maxlength: "20"
            },
            sexo: {
                required: true
            },
            historiaclinica: {
                required: true,
                maxlength: "20"
            },
            osocial: {
                lettersonly: true,
                maxlength: "20"
            }
  ...