Css HTML5输入表单-仅当错误或模式不匹配时显示范围

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

目前，我的span设置为不可见，直到输入有效。但是，输入文本字段的默认状态为空，因此无效，默认情况下，范围可见

HTML:

---

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

即使使用伪选择器

empty

，也不可能仅使用CSS：

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

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

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

即使JSFIDLE与您正在寻找的css一起使用，但它不会更新状态（tldr，对于css，它始终有效或无效，没有中点）

---

这和他现在的情况有什么不同？我不认为这是可能的——CSS无法区分这两种状态。

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

input:invalid + .formhelp
   display:block;

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

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