Menu
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 ?
339
The readonly attribute of <input> element in HTML is used to specify that the input field is read-only. If an input is readonly, then it's content cannot be changed but can be copied and highlighted. It is a boolean attribute. Example: This example uses HTML <input> readonly Attribute.
Save this answer. Show activity on this post. Disabled means that no data from that form element will be submitted when the form is submitted. Read-only means any data from within the element will be submitted, but it cannot be changed by the user.
You can make the TextBox as read-only by setting the readonly attribute to the input element.
The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.
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="[email protected]">
<input type="email" readonly value="invalidemail">
<input type="email" readonly value="[email protected]">
CSS:
input:invalid {
background-color: red;
}
input:valid {
background-color: green;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
