我的警告标签未显示在无效输入上

My warning label is not showing on invalid input

本文关键字：无效 输入 显示 警告 标签 我的      更新时间：2023-09-26

我还不想使用JQuery，所以我正在尝试寻找替代解决方案。我已经用一个有效的验证函数写了一个 from。现在我想添加一个函数，该函数编辑要在无效输入上显示的标签。我的 css 代码是这样的：

#invalidInputHidden{
    display:none;
    color:#FF0000;
}
.error{
    display:block;
}

因此，警报文本首先是隐藏的。在我的JavaScript中，我在标签中添加了一个类，这应该使其再次可见。我把它放在验证函数中：

invalidInputHidden.className += " error";

然而，这并没有发生。是因为 id 优先于类，所以它总是有"display：none;"吗？

"是因为 id 优先于类吗"

是的。

"...所以它总是有display:none;？

好吧，并非总是如此。绕过通常的特异性规则的一种方法是使用 !important：

.error{
    display:block !important;
}

这通常不被认为是好的做法，事实上，我上面提供的 MDN 链接建议不要这样做，但就我个人而言，我不介意在你的情况下，你的.error类在应用时可能是最重要的风格规则。

相关文章：