希望使用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:
input:not(:empty):not(:focus):invalid
因为直到现在CSS还没有值的(伪)选择器,所以空的伪类永远不会选择正确HTML文档中的任何内容。