Почему только для чтения поле ввода не действует

Question

Рассмотрим следующий HTML:

<input bar value="bar"> 

<input foo readonly value="foo"> 

Странная вещь здесь является то, что первый элемент ввода является действительным, а второй один не только потому, что это только для чтения!

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

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

DEMO/JSFIDDLE

Что здесь происходит? И как я могу это исправить?

Answer 1

Входы только для чтения: barred from constraint validation, в соответствии с HTML5 docs.

Это означает, что вход только для чтения недействителен и недействителен.

Здесь какой-то код, который демонстрирует его (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; 
}