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

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

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>

#在这里放置一些html，以便您可以看到一些输入字段

CSS

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

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

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

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

输入[type=“text”].claserror{
颜色：#DF0101；
背景#DF0101；
}
埃雷尔·克拉斯罗{
颜色：#DF0101；
}

JS

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

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

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

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

$（“#miForm”）.validate({
errorClass:“claserror”，
有效类：“克拉塞瓦利达”，
errorElement:'erele'，
规则：{
名义：{
要求：正确，
信一：没错，
最大长度：“20”
},
razon_社会：{
要求：正确，
信一：没错，
最大长度：“25”
},
特别是：{
必填项：true
},
母校：{
要求：正确，
最大长度：“20”
},
母系：{
要求：正确，
最大长度：“20”
},
阿佩利多：{
要求：正确，
信一：没错，
最大长度：“20”
},
dni：{
要求：正确，
数字：对，
minlength:“8”，
最大长度：“8”
},
cuil：{
要求：正确，
数字：对，
minlength:“10”，
最大长度：“11”
},
纳西门托：{
要求：正确，
日期：对
},
科雷奥：{
电子邮件：真的
},
指令：{
要求：正确，
最大长度：“25”
},
电话：{
要求：正确，
数字：对，
最大长度：“20”
},
celular：{
数字：对，
最大长度：“20”
},
性别：{
必填项：true
},
历史文化：{
要求：正确，
最大长度：“20”
},
社会：{
信一：没错，
最大长度：“20”
}
},
信息：{
名义：{
信上写着：“描述索洛·莱特拉斯”
},
阿佩利多：{
信上写着：“描述索洛·莱特拉斯”
},
社会：{
信上写着：“描述索洛·莱特拉斯”
},
razon_社会：{
信上写着：“描述索洛·莱特拉斯”
}
},
突出显示：函数（元素、errorClass、validClass）{
$（元素）.parent（'.miForm'）.addClass（'error'）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.parent（'.miForm'）.removeClass（'error'）；
}
});

摆脱这个问题。在您的类容器中，对于初学者，我发现了问题。。。。在控制突出显示的部分中，我缺少添加错误类的代码行，因此没有发生任何事情。。以下是我所做的：

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
}

感谢那些试图帮助我的人：）

我的问题是，当输入字段无效时，我无法更改背景字段的颜色

你在这里直接破坏了它

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

unhighlight

和

unhighlight

功能旨在将错误和有效类应用于输入元素。上面的自定义函数超越了默认行为

适当移除或调整这些功能

---

工作演示：

我猜您键入的类容器是错误的

？您的意思是我必须将“表单控件”更改为“.container”。。这个页面运行得很好。。问题是，当我有一个错误时，输入字段像以前一样保持不变，我希望它有红色和边框..不，我只是想知道为什么你的类中有一个点（.）？您可能会与之发生冲突，尤其是当您使用jqueryi时，如果我只是键入“container”，则输入字段不会保留在原来的位置。。它是有用的也许你有一个容器的css呢？因为我非常确定。容器不能与cssplz一起使用。我的英语很差，我听不懂他说的话-删除这行代码中的点我做到了。。但它保留了同样的问题idk如果我的代码正确，当输入字段出错时，我只需要红色的输入字段。这应该写在注释部分，而不是作为答案：）您可以使用常规的onsubmit事件处理程序，并循环检查元素是否为null或空字符串，如果是，请将该元素的样式设置为指定的背景色。