html - 延迟 HTML5 :invalid pseudo-class until the first event

Question

我最近发现 :invalid 伪类在页面加载后立即应用于 required 表单元素。例如，如果您有以下代码:

<style>
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
</style>
…
<input name="foo" required />

然后您的页面将加载一个空的粉红色输入元素。将验证内置到 HTML5 中很棒，但我认为大多数用户根本不希望表单在他们有机会输入任何值之前进行验证。有什么方法可以延迟伪类的应用，直到第一个影响该元素的事件(表单提交、模糊、更改，任何合适的)？没有 JavaScript 可以做到这一点吗？

Answer 1

http://www.alistapart.com/articles/forward-thinking-form-validation/

Since we only want to denote that a field is invalid once it has focus, we use the focus pseudo-class to trigger the invalid styling. (Naturally, flagging all required fields as invalid from the start would be a poor design choice.)

按照这个逻辑，你的代码看起来像这样......

<style>
    input:focus:required:invalid {background-color: pink; color: white;}
    input:required:valid {background-color: white; color: black; }
</style>

在这里创建了一个 fiddle :http://jsfiddle.net/tbERP/

正如您所猜测的那样，正如您将从 fiddle 中看到的那样，此技术仅在元素具有焦点时显示验证样式。一旦您将焦点移开，样式就会被丢弃，无论它是否有效。无论如何都不理想。