Question

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

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

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

Answer 1

首先使用标签

的id属性

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

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

您可以在某个按钮点击或文本框的onblur上编写此代码

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">

JS

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

}

当未填写所需输入时，将标签标记为红色

1 个答案: