1
I just realized that the readonly in the input is giving as valid, even not containing any information.
input with this attribute?Example:
console.log(document.getElementById('RSPIUF').checkValidity())<input type="text" id="RSPIUF" name="registration-step-personal-information-uf" class="form-control" aria-describedby="UF" placeholder="UF" readonly required>6
A field defined as readonly is intended only to present information to the user in a way that is sent together with the data in the submission of the form. As the name itself says is a read-only field, so it is assumed that the field has the attribute value, even if empty (because an empty value can be a valid value).
Why does he return true in the validation?
Because it will always be valid. Values in a field readonly will be defined by the application itself and therefore will always be valid. However, it does not return true for this reason, in fact a field readonly nor goes through validation.
In accordance with the W3C:
Constraint validation: If the
readonlyattribute is specified on an input element, the element is barred from Constraint validation.
That is, if the attribute readonly is specified in a field, the element is barred from the validation.
So how can I validate a field readonly?
It doesn’t validate. Not the field, at least. You mentioned that you are applying this to display the result of an address search in the Post API from the ZIP code informed by the user, in my view you will be using the attribute incorrectly in this situation. User address information is the user’s responsibility and he may want to change it, it makes no sense to deprive him of it. It is even quite common that the API result is incorrect. Street names change, Zip codes change... believe me, you don’t want your system trusting blindly on the API.
My advice is to remove the attributes readonly of that field. This even has a positive impact on your user experience. Let them do what they’re expected to do.
Maybe in some very specific situation it is really necessary to do this validation in the field value readonly, but for that do before setting the value. It makes no sense for you to assign an invalid value in the field and then validate it. Validate before, still in your application and only enter in the field if it is valid.
-1
Not valid, it simply does not pass the checkValidity API. The API ignores input fields with the attribute readonly, that is, the attribute required will have no effect. See here a list of elements ignored by the API, which also says that:
[INPUT in TEXT status] Must be barred from the Constraint validation if it is readonly
Google Translation:
[INPUT in TEXT status] Must be barred from restriction validation if for read-only
Without getting into the question of being using an empty readonly text input or the reason for doing so, you could (not that you should) check the field without using the API, for example, checking whether it is empty and blocking Submit:
document.forms[0].onsubmit = function(){
if(!document.getElementById('RSPIUF').value.trim()){
alert("Campo vazio");
return false;
}
}<form action="./">
<input type="text" id="RSPIUF" name="registration-step-personal-information-uf" class="form-control" aria-describedby="UF" placeholder="UF" readonly required>
<button>Enviar</button>
</form>It would be wise and reliable to validate only the field that feeds this input with readonly?
Can validate only the field that feeds, would be enough. The important thing is to validate in the backend if you will use it somehow.
I left my -1 only because I see no justification to do this, because it is a solution to a problem that the developer himself inserted. In my view, it makes more sense to avoid the problem than to solve it and to do so would simply remove the readonly from the field - and this would even impact positively on the user experience, as it would not deprive them of doing an action they can do (changing the data).
@Andersoncarloswoss blz, I thank you for the vote, even if it is negative, and for your frankness. Despite not being explicit in the question, the AP commented that the field is fed by another field (?)... without getting into the merit of the way he is doing it (whether it is the best, whether it is correct or not) I just addressed the fact of the field with readonly be ignored by the API, which was the central point of the question, the only point. But thanks! Abs!
@Andersoncarloswoss taking advantage, if you have an answer that you think is right, please post there and help us improve the quality of the topic. Abs!
Browser other questions tagged javascript html5 form
You are not signed in. Login or sign up in order to post.
In fact
readonlyandrequiredin the same input is strange to say the least...– hugocsl
@hugocsl I am trying to do the following.. This is one of those fields that will only be inserted the
valueas soon as you enter the zip code (there will be the query in the mail API), correct? But this information is mandatory to have. What you advise?– user148754
But why would it be
readonly? And if the information is wrong and the user needs to correct?– Woss
You have to validate the field that feeds the readonly and not the readonly field
– hugocsl
@Andersoncarloswoss not the only
inputwhich changes is that of the CEP. Thereadonlyit is only for reading. However the difference ofreadonlyand ofdisabledis that thereadonlyis forwarded to the form, so thedisablednay.– user148754
@hugocsl could explain to me why this and why it is strange to have the required with him?
– user148754
Yes, I didn’t understand what this interferes with what I said. If you put, for example, the street name as
readonlyuser will not be able to edit, even if this information came wrong - and if you are going to use the Post Office API, believe me, this is much more common than you think.– Woss
@THIAGODEBONIS I think you already have an answer, but it is for that reason as obvious as it seems.
– hugocsl