jquery - 如何在错误jquery验证时更改输入字段的背景颜色

Question

我的问题是，当我有一个无效的输入字段时，我无法更改背景字段的颜色，我可以更改错误消息的颜色，但我希望该字段具有红色背景和边框...我的代码:

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 1

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

你在这里直接破坏它......

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

unhighlight 和unhighlight 函数旨在将错误和有效类应用于输入元素。您上面的自定义函数覆盖了默认行为。

适本地删除或调整这些功能。

工作演示:http://jsfiddle.net/yn1podbe/