Question

考虑以下html：

<input bar value="bar">

<input foo readonly value="foo">

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

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

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

DEMO/JSFIDDLE

这里发生了什么？我该如何解决这个问题？

Answer 1

根据{{3}}，

只读输入为barred from constraint validation。

这意味着，只读输入既无效也无效。

这里有一些代码演示它（HTML5 docs）：

HTML：

<input type="email" value="invalidemail">
<input type="email" value="valid@e.mail">

<input type="email" readonly value="invalidemail">
<input type="email" readonly value="valid@e.mail">

CSS：

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

为什么只读输入字段无效

1 个答案: