希望使用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文档中的任何内容。

08-25 13:40
查看更多