HTML5 输入表单 - 仅当错误或模式不匹配时才显示跨度答案

【问题标题】：HTML5 input form - display span only if error or pattern not matchedHTML5 输入表单 - 仅当错误或模式不匹配时才显示跨度
【发布时间】：2015-03-24 02:34:40
【问题描述】：

希望使用 HTML5 和 CSS 处理输入表单错误 - 不使用 JS。

目前，我将跨度设置为不可见，直到输入有效。但是，输入文本字段的默认状态是空白，因此无效，并且span默认是可见的。

HTML：

 <input class="form-control" placeholder="#####" 
 name="zip" pattern="\d{5}"  title="Enter valid 5 digit zip" 
 required><span class="formhelp">5 digit ZIP required</span>

CSS：

.formhelp
   display:none;
   font-size: 70%;

input:invalid + .formhelp
   display:block;

目标是仅在字段失去焦点后模式无效时才显示跨度，而不是像默认状态那样为空。

【问题讨论】：

我认为这不可能——CSS 无法区分这两种状态。

标签： css html validation

【解决方案1】：

即使使用伪选择器empty，这也是不可能的：

input:not(:empty):not(:focus):invalid

因为到目前为止 CSS 还没有（伪）值选择器，所以空的伪类永远不会选择正确 HTML 文档中的任何内容。

【讨论】：

这和他现在的有什么不同？

【解决方案2】：

正如CBroe 所述，CSS 不知道如何区分这两种状态。

尽管，Here 是 JSFiddle 与您正在寻找的 css，但它不会更新状态，（tldr，对于 css，它始终有效或无效，没有中点）。

input:invalid:not([value=""]) + .formhelp{
    display:block;
}

【讨论】：