forms - 错误更改表单中的标签颜色

Question

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

<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 来做到这一点。

Answer 1

您可以在单击提交按钮时触发此事件

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

Answer 2

正如我在评论中提到的，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;}

小提琴

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

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