如何移除jQuery Validator标签的box-shadow？实现差异化错误样式

快速修复：CSS层面调整 #

直接修改现有CSS，让错误样式只作用于输入框/文本域，移除标签的阴影：

/* 只给输入框、文本域应用错误阴影 */
input.invalid-input, textarea.invalid-input {
    box-shadow: 0 3px 0 0 rgb(255 0 0) !important;
    color: red;
}

/* 单独重置标签的错误样式 */
label.invalid-input {
    color: red; /* 保留文字红色 */
    box-shadow: none !important; /* 移除阴影 */
}

或者用更简洁的选择器排除标签：

.invalid-input:not(label) {
    box-shadow: 0 3px 0 0 rgb(255 0 0) !important;
    color: red;
}

进阶方案：为输入框和标签设置不同错误类 #

通过jQuery Validator的highlight和unhighlight回调，自定义不同元素的错误类：

修改JS代码 #

$(function(){
    $("#form-email").validate({
        rules:{
            fname:"required",
            femail:"required",
            fsubject:"required",
            fmessage:"required"
        },
        // 自定义错误高亮逻辑
        highlight: function(element, errorClass, validClass) {
            // 给输入/文本域添加专属错误类
            $(element).addClass("input-error");
            // 给相邻的标签添加另一个错误类
            $(element).next("label").addClass("label-error");
        },
        // 自定义取消高亮逻辑
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass("input-error");
            $(element).next("label").removeClass("label-error");
        },
        submitHandler: function() { alert("Success, your e-mail has been submited!") }
    });    
});

对应的CSS样式 #

/* 输入框错误样式 */
.input-error {
    box-shadow: 0 3px 0 0 rgb(255 0 0) !important;
    color: red;
}

/* 标签错误样式（按需调整） */
.label-error {
    color: red;
    /* 标签不需要阴影，无需设置box-shadow */
}

原理：jQuery Validator默认的highlight方法会同时给表单元素和关联标签添加全局errorClass，自定义该回调后可以精准控制每个元素的类名和样式。

内容的提问来源于stack exchange，提问作者Cohiba