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

Question

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>

you mean that i have to change "form-control" to ".container".. the page runs perfectly.. the problem is that when i have an error the input field keeps like before, i want it with red color and borders.. — LeandroDiaz96, Apr 13 '16 at 00:18
nope I'm just wondering why do you have a **dot (.)** in your class? you might get conflicts with that especially when you use jquery — JF-Mechs, Apr 13 '16 at 00:22
if i just type "container" the input fields dont keep in their place.. its useful — LeandroDiaz96, Apr 13 '16 at 00:26
maybe you have a css for **container** then? because I'm quiet sure .container won't work with css — JF-Mechs, Apr 13 '16 at 00:29
correct.. .container{ height: 80%; width: 0% } thats it (in css, i didnt write it in the code cause i thought it was useless) — LeandroDiaz96, Apr 13 '16 at 00:31
when you call `.container` in your style sheets it is not calling that parent `
` its not calling anything.. the `.container` in your stylesheet is only looking for an element with a class `container` and not **.container** remember that dot(.) is a class selector that is why you should not do a class element with a dot. For more info about class selector you can check http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors — JF-Mechs, Apr 13 '16 at 00:35
well i did it.. change just the name of the class to "container" instead of ".container".. it works well but i keep my trouble of the input field.. if someone knows plz help! — LeandroDiaz96, Apr 13 '16 at 04:09

score 0 · Accepted Answer · edited Jun 07 '16 at 07:38

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 :)

score 0 · Answer 2 · answered Apr 13 '16 at 04:51

My problem is that when i have an input field that is not valid i cant change the color of the background field

You're directly breaking it here...

highlight: function(element, errorClass, validClass) {
    $(element).parent('.miForm').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
    $(element).parent('.miForm').removeClass('error');
}

The unhighlight and unhighlight functions are designed to apply the error and valid classes to the input elements. Your custom functions above are over-riding the default behavior.

Remove or adjust these functions appropriately.

Working DEMO: http://jsfiddle.net/yn1podbe/

score -2 · Answer 3 · answered Apr 13 '16 at 00:32

-2

Get Rid of the . in your class container for starters

answered Apr 13 '16 at 00:32

meddy

385
6
21

plz i have a poor English, i couldnt understand – LeandroDiaz96 Apr 13 '16 at 00:34
He says - Remove the dot in this line of code
– HelloWorldNoMore Apr 13 '16 at 00:36
i did it.. but it keeps the same problem, idk if my code its rigth, i just need the input field in red when its an error – LeandroDiaz96 Apr 13 '16 at 00:40
1

this should be written in the comment section and not as an answer :) – JF-Mechs Apr 13 '16 at 00:40
You can use a regular onsubmit event handler and loop through the elements check for null or empty String if so set the style of that element to the specified background color. – meddy Apr 13 '16 at 00:48
**You can use a regular onsubmit event handler and loop through the elements check for null or empty String if so set the style of that element to the specified background color.** add this to your answer, it might help peoples in SO :) – JF-Mechs Apr 13 '16 at 00:48

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

3 Answers3