Why is read-only input field invalid
Consider the following html:
<input bar value="bar">
<input foo readonly value="foo">
It's weird that the first input element is valid and the second is not just because it is read-only!
$('[bar]').is(':valid') === true
$('[foo]').is(':valid') === false
What's going on here? And how can I fix this?
+3
source to share
1 answer
Readonly inputs are denied via constraint validation , as per the HTML5 docs .
This means the read input is neither valid nor invalid.
Here's some code that demonstrates it ( see the script ):
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;
}
+7
source to share