As pseudoclasses :user-valid e :user-invalid

Publicado em 8 de novembro de 2023

A entrada do usuário é uma das preocupações mais sensíveis em qualquer interface do usuário. Um aplicativo utilizável precisa ajudar os usuários a identificar, entender e corrigir erros na entrada. Os seletores de pseudoclasse :user-valid e :user-invalid ajudam a melhorar a experiência do usuário na validação de entrada, fornecendo feedback sobre erros somente depois que um usuário mudou a entrada. Com esses novos seletores, não é mais preciso escrever código com estado para acompanhar a entrada que um usuário mudou.

Os seletores de pseudoclasse de interação do usuário

Os seletores de pseudoclasse :user-valid e :user-invalid são semelhantes às pseudoclasses :valid e :invalid. Ambos correspondem a um controle de formulário com base na verificação se o valor atual atende às restrições de validação. No entanto, a vantagem das novas pseudoclasses :user-valid e :user-invalid é que elas correspondem a um controle de formulário somente depois que um usuário interage significativamente com a entrada.

Um controle de formulário obrigatório e vazio vai corresponder a :invalid, mesmo que um usuário não tenha começado a interagir com a página. No entanto, esse mesmo controle de formulário não vai corresponder a :user-invalid até que o usuário mude a entrada e a deixe em um estado inválido.

Usar as pseudoclasses :user-valid e :user-invalid

Use essas pseudoclasses para estilizar controles de entrada, seleção e textarea, conforme mostrado nos exemplos abaixo:

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: green;
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: red;
}

<input required="required" />

<select required="required">
  <option value="">Choose an option</option>
  <option value="1">One</option>
</select>

<textarea required="required"></textarea>

Uma imagem que combina três capturas de tela lado a lado para comparação. Cada captura de tela mostra um formulário da Web com os mesmos controles de entrada, seleção e área de texto. A primeira captura de tela mostra o formulário no estado inicial antes de qualquer entrada do usuário. As bordas do controle estão esmaecidas, e o texto de ajuda abaixo explica que cada controle corresponde ao seletor de pseudoclasse :invalid. A segunda captura de tela mostra o mesmo formulário depois que um usuário forneceu entrada para cada controle. As bordas do controle são verdes, e o texto de ajuda abaixo explica que cada controle corresponderá aos seletores de pseudoclasse :valid e :user-valid. A terceira e última captura de tela mostra o mesmo formulário depois que um usuário removeu todas as entradas. As bordas do controle estão vermelhas, e o texto de ajuda abaixo explica que cada controle corresponderá aos seletores de pseudoclasse :invalid e :user-invalid.

A correspondência dos seletores é feita com base em uma combinação de interações do usuário e restrições de validação. Interaja com a demonstração a seguir para conferir como elas funcionam:

Melhor experiência do usuário com menos código

Sem essas pseudoclasses, alcançar a experiência do usuário ativada por :user-valid e :user-invalid exigia a criação de um código com estado extra. Esse código precisava acompanhar o valor inicial, o estado de foco atual do input, a extensão das mudanças do usuário no valor, executar uma verificação de validade extra e, por fim, adicionar uma classe para selecionar o estilo. Agora você pode confiar no navegador para processar tudo automaticamente.

Mais recursos

Foto de capa de Behzad Ghaffarian no Unsplash.