0

Acabei de perceber que o readonly no input está dando como válido, mesmo não contendo nenhuma informação.

  • Por que isto acontece?
  • Como proceder para validar o input com este atributo?

Exemplo:

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>

8
  • 4
    Na verdade readonly e required no mesmo input é no mínimo estranho...
    – hugocsl
    Commented 4/07/2019 às 18:02
  • @hugocsl eu estou tentando fazer o seguinte.. Este é um daqueles campos que só irá ser inserido o value assim que digitar o CEP (ai será feito a consulta na API do correio), correto? Porém esta informação é obrigatória a ter. O que você aconselha?
    – user148754
    Commented 4/07/2019 às 18:05
  • Mas por que seria readonly? E se a informação vier errada e o usuário precisar corrigir?
    – Woss
    Commented 4/07/2019 às 18:07
  • 1
    Vc tem que validar o campo que alimenta o readonly e não o campo readonly
    – hugocsl
    Commented 4/07/2019 às 18:07
  • 1
    Sim, não entendi o que isso interfere no que comentei. Se você colocar, por exemplo, o nome da rua como readonly o usuário não poderá editar, nem se essa informação veio errada - e se for usar a API dos Correios, acredite, isso é muito mais comum do que imagina.
    – Woss
    Commented 4/07/2019 às 18:10

2 Respostas 2

6

Um campo definido como readonly tem por finalidade apenas apresentar uma informação ao usuário de forma que seja enviada junto com os dados na submissão do formulário. Como o próprio nome diz é um campo de apenas leitura, então parte-se da premissa que o campo possua o atributo value, mesmo que vazio (pois um valor vazio pode ser um valor válido).

Por que ele retorna true na validação?

Porque ele sempre será válido. Os valores em um campo readonly serão definidos pela própria aplicação e, portanto, sempre serão válidos. Porém, não retorna true por esse motivo, na verdade um campo readonly nem passa pela validação.

Conforme a W3C:

Constraint validation: If the readonly attribute is specified on an input element, the element is barred from constraint validation.

Ou seja, se o atributo readonly for especificado em um campo, o elemento é barrado da validação.

Então como posso validar um campo readonly?

Não valida. Não o campo, pelo menos. Você citou que está aplicando isso para exibir o resultado de uma busca de endereço na API dos Correios a partir do CEP informado pelo usuário, ao meu ver você estará utilizando o atributo de forma errada nesta situação. Informações do endereço do usuário são de responsabilidade do usuário e ele pode querer alterá-las, não faz sentido privá-lo disso. Inclusive é bastante comum que o resultado da API venha incorreto. Nomes de ruas mudam, CEPs mudam... acredite, você não vai querer ter seu sistema confiando cegamente na API.

Meu conselho é remover os atributos readonly desses campo. Isso, inclusive, impacta positivamente na experiência do seu usuário. Deixe ele fazer aquilo que é esperado ele poder fazer.

Talvez em alguma situação muito específica seja realmente necessário fazer essa validação no valor do campo readonly, mas para isso faça antes de definir o valor. Não faz sentido você atribuir um valor inválido no campo para depois validá-lo. Valide-o antes, ainda na sua aplicação e só insira no campo se ele for válido.

-1

Não que seja válido, ele simplesmente não passa pela API checkValidity. A API ignora campos input com o atributo readonly, ou seja, o atributo required não vai ter efeito algum. Veja aqui uma lista de elementos ignorados pela API, onde diz também que:

[INPUT in TEXT status] Must be barred from the constraint validation if it is readonly

Tradução Google:

[INPUT in TEXT status] Deve ser barrado da validação de restrição se for somente leitura

Sem entrar na questão de estar usando um input de texto readonly vazio ou a razão de fazer isso, você poderia (não que devesse) verificar o campo sem o uso da API, por exemplo, verificando se ele está vazio e barrar o 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>

5
  • Seria sábio e confiável validar somente o campo que alimenta este input com readonly?
    – user148754
    Commented 4/07/2019 às 18:10
  • 1
    Pode validar somente o campo que alimenta, já bastaria. O importante mesmo é validar no backend se vc for usá-lo de alguma forma.
    – Sam
    Commented 4/07/2019 às 18:12
  • 3
    Deixei meu -1 só porque não vejo justificativas para se fazer isso, pois é uma solução para um problema que o próprio desenvolvedor inseriu. Ao meu ver, faz mais sentido evitar o problema do que resolvê-lo e para isso bastaria remover o readonly do campo - e isso inclusive impactaria positivamente na experiência do usuário, pois não o privaria de fazer uma ação que pode fazer (alterar os dados).
    – Woss
    Commented 4/07/2019 às 18:21
  • @AndersonCarlosWoss blz, agradeço o voto, mesmo sendo negativo, e pela franqueza tb. Apesar de não estar explicitado na pergunta, o AP comentou que o campo é alimentado por outro campo (?)... sem entrar no mérito da forma que ele está fazendo isso (se é a melhor, se está correta ou não) apenas abordei o fato do campo com readonly ser ignorado pela API, que foi o ponto central da pergunta, aliás o único ponto. Mas valeu aí! Abs!
    – Sam
    Commented 4/07/2019 às 18:24
  • 1
    @AndersonCarlosWoss aproveitando, se possui uma resposta que acha mais correta, por favor, poste aí e nos ajude a melhorar a qualidade do tópico. Abs!
    – Sam
    Commented 4/07/2019 às 18:29

Você deve fazer log-in para responder a esta pergunta.