How to change the background color of an input field on error jquery validation
<p>My problem is that when i have an input field that is not valid i cant change the color of the background field, i could change the color of the error msg but i want the field with a red background and borders...
My code:</p>

<p><strong>HTML</strong></p>

<pre><code>#put here some html so you can see some of the input fields

&lt;div class=".container "&gt;

&lt;form id="miForm" method="post" enctype="multipart/form-data" class="form-horizontal"&gt;

&lt;div class="row"&gt;
    &lt;div class="col-md-2"&gt;
        &lt;input class="form-control" id="dni" name="dni" type="text" placeholder="Dni" /&gt;
    &lt;/div&gt;


    &lt;div class="col-md-2"&gt;
        &lt;input class="form-control" id="historiaclinica" name="historiaclinica" type="text" placeholder="Historia Clinica" /&gt;
    &lt;/div&gt;

    &lt;div class="col-md-2"&gt;
        &lt;input class="form-control" id="cuil" name="cuil" type="text" placeholder="Cuil" /&gt;
    &lt;/div&gt;
&lt;/div&gt;    
&lt;/form&gt;

&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>&lt;style type="text/css" media="screen"&gt;

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

erele.claserror {
color:#DF0101;
}
&lt;/style&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>&lt;script&gt;
$("#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"
        }
    },
messages: {
    nombre: {
        lettersonly: "Escribe sólo letras"
    },
    apellido: {
        lettersonly: "Escribe sólo letras"      
    },
    osocial: {
        lettersonly: "Escribe sólo letras"      
    },
    razon_social: {
        lettersonly: "Escribe sólo letras"
    }
    },
highlight: function (element, errorClass, validClass) {
    $(element).parent('.miForm').addClass('error');
    },
unhighlight: function (element, errorClass, validClass) {
    $(element).parent('.miForm').removeClass('error');
    }
});
&lt;/script&gt;
</code></pre>