错误更改表单中的标签颜色答案

【问题标题】：Change label color in form with error错误更改表单中的标签颜色
【发布时间】：2013-07-06 21:54:44
【问题描述】：

我很忙于验证插件。当有人点击提交按钮并且未填写必填字段时，相关字段的边框颜色将变为红色。然而，我的问题是我还希望它旁边的文本颜色发生变化。这是我的结构：

<div class="row">
    <label for="name">Name*</label>
    <input type="text" id="name" name="name">
</div>
.form.a input.error {border:2px solid #eb053b;}

我现在如何选择标签元素来更改文本颜色？使用 CSS 是不可能的，因为您无法选择父元素，但我不知道如何使用 jQuery。

【问题讨论】：

你能分享你正在使用的验证插件的名称，或者分享一个小提琴吗？如果您使用jquery validator（一种流行的），只需在您的css中使用label.error { color: #EB053B; }就足够了..
感谢您的反应！我正在使用jqueryvalidation.org 我认为这是您正在谈论的那个。但是，当我添加 label.error { color: #EB053B; } 到我的代码，它不起作用。
这里的问题是jquery验证插件（和你提到的一样）在输入框后添加了另一个label[for='name']元素，并且这个标签有一个与之关联的类错误。我以为它会检查标签是否已经存在，但发现它不存在。

标签： forms validation colors label

【解决方案1】：

点击提交按钮即可触发该事件

if(jQuery('.form.a input').css('border')==2px solid #eb053b){
    jQuery(this).siblings('label').css('color','#eb053b');
}

【讨论】：

点击提交按钮时触发此事件，您的意思是这样吗？：$(".buttonlink").click(function (){ if($('input').css('border') == '2px'){ $(this).siblings('label').css('color','#eb053b'); } });我希望您的意思是别的，因为这不起作用。

【解决方案2】：

正如我在 cmets 中提到的，jquery 验证器默认在输入框之后添加一个标签，其中包含一个类“错误”。虽然我还没有找到阻止验证器执行此操作的技巧，但这是我在表单中练习的内容。
HTML：

<div class="row">
    <input type="text" id="name" placeholder="Name (required)" name="name">
</div>

CSS：

.form.a input.error {border:2px solid #eb053b;}
label.error { color: #ebo53b;}

FIDDLE

这将在输入框红色之后的标签中生成有意义的错误消息。
可以使用 jquery 验证器的rules 选项自定义错误消息，标签的位置（之前或之后）由errorPlacement 选项更改。

如果我找到您问题的确切解决方案，我会更新我的答案。

【讨论】：

我成功删除了错误信息。这可以在验证器的以下代码中完成：messages:{required:"",remote:"",email:"Please enter a valid email address.", 只需删除引号之间的文本即可。我的问题与错误消息无关，因为每个标签都有唯一的文本。