未填写所需输入时将标签标记为红色答案

【问题标题】：Mark label as red when required input is not filled未填写所需输入时将标签标记为红色
【发布时间】：2025-11-25 10:05:01
【问题描述】：

假设我有这个表单输入元素：

<label for="myInput">Label Text</label>
<input type="text" name="special" id="myInput" required>

现在因为这个输入是必需的，而且我没有在这个字段中输入任何值，我得到一个错误提示

此字段为必填项。

验证：现有的默认 html5 验证似乎被 jQuery 验证器覆盖。神奇的事情发生了，我发现我可以通过改变下面的 css 来改变现有的样式行为

select.error,
input[type=text].error,
input[type=email].error,
input[type=password].error {
    border: 2px solid #ff0000;
}
label.error {
    color: #ff0000;
    font-size: .8em;
}

我还注意到，在错误情况下，上面的 html 如下所示：

<label for="myInput">Label Text</label>
<input type="text" name="special" id="myInput" required>
<label class="error" for="myInput">This field is required.</label>

首先您认为验证是如何进行的？
如何将第一个标签元素文本中的文本设置为红色？
在代码中，我应该在哪里寻找上述问题的答案？

【问题讨论】：

标签先使用id属性，然后document.getElementById('labelid').style.color = "red"; , 你可以在一些按钮点击或文本框的模糊上写这段代码
更新您的 validate.js 并添加一个特定的类到标签中，它在输入中添加一个错误类。
您如何验证必填字段？ onblur? onclick???
验证脚本？
改进格式以提高可读性

标签： javascript jquery css html

【解决方案1】：

首先使用标签的id属性

<label for="myInput" id="mylabel">Label Text</label>

，然后是document.getElementById('mylabel').style.color = "red";

您可以在某些按钮单击或文本框模糊时编写此代码

DEMO

如果您使用的是 jquery，那么您可以参考以下代码

$( "#myInput" ).blur(function() {
 document.getElementById('mylabel').style.color = "red";
});

JS 解决方案

html

<label for="myInput" id="mylabel">Label Text</label>
<input type="text" name="special" onblur="blurFunction()" onfocus="focusFunction()"  id="myInput">

function blurFunction()
{
    document.getElementById('mylabel').style.color = "red";

}

【讨论】：