为什么只读输入框无效？

Question

考虑以下html代码：

下面是一个示例：

<input bar value="bar">

<input foo readonly value="foo">

奇怪的是，第一个输入元素是有效的，而第二个输入元素不是，仅仅因为它是只读的！

$('[bar]').is(':valid') === true

$('[foo]').is(':valid') === false

演示/JSFIDDLE

这里发生了什么？我该如何修复它？

- Jeanluca Scaljeri

Answer 1

根据HTML5文档，只读输入不会被约束验证所限制。

这意味着，只读输入既不是有效的也不是无效的。

下面是一些演示代码（请参见fiddle）：

HTML：

<input type="email" value="invalidemail">
<input type="email" value="[e-mail]">

<input type="email" readonly value="invalidemail">
<input type="email" readonly value="[e-mail]">

CSS：

input:invalid {
    background-color: red;
}
input:valid {
    background-color: green;
}

- Alex Shesterov

---

非常感谢，现在更有意义了 :) 我已经在这里更新了jsfiddle一点 [http://jsfiddle.net/n1vykgxg/12/]，以便更好地可视化它！ - Jeanluca Scaljeri