LeandroDiaz96 LeandroDiaz96 - 6 months ago 27
HTML Question

How to change the background color of an input field on error jquery validation

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:

HTML

#put here some html so you can see some of the input fields

<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>
</form>

</div>


CSS

<style type="text/css" media="screen">

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

erele.claserror {
color:#DF0101;
}
</style>


JS

<script>
$("#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');
}
});
</script>

Answer

guys I have found the problem.... in the section controlling the highlight I was missing the line of code that added the error class so nothing was happening.. here is what I did:

highlight: function (element, errorClass, validClass) {
    $(element).parent('.miForm').addClass('error');
    $(element).addClass(errorClass).removeClass(validClass); #this one for highlight the input
},
unhighlight: function (element, errorClass, validClass) {
    $(element).parent('.miForm').removeClass('error');
    $(element).addClass(validClass).removeClass(errorClass); #this one for unhighlight the input
}

thanks to the people who tried to help me :)