title: How to change the background color of an input field on error jquery validation
body: <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>