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

我现在如何选择label-element来改变文字颜色？使用CSS是不可能的，因为你不能选择一个父元素，但我不知道如何用jQuery来做。

Answer 1

您可以点击提交按钮

来触发此事件

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

Answer 2

正如我在评论中提到的那样，jquery验证器默认在输入框后面添加一个标签，其中包含一个类'error'。虽然我还没有找到阻止验证器执行此操作的黑客，但这是我在表单中练习的内容 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选项更改标签的位置（之前或之后）。

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

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

2 个答案: