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

我找到问题的人....在控制突出显示的部分中我错过了添加错误类的代码行，所以没有发生任何事情..这就是我所做的：

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
}

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

Answer 2

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

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

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/

Answer 3

摆脱了。在您的类容器中为初学者

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

3 个答案: