Why is readonly input field not valid

Question

Consider the following html:

<input bar value="bar">

<input foo readonly value="foo">

The weird thing here is that the first input element is valid and the second one is not just because it is readonly!

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

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

DEMO/JSFIDDLE

What is going on here ? And how can I fix this ?

Answer 1

Readonly inputs are barred from constraint validation, according to HTML5 docs.

This means, a readonly input is neither valid nor invalid.

Here some code which demonstrates it (see fiddle):

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;
}