As pseudoclasses :user-valid e :user-invalid

:user-valid

Compatibilidade com navegadores

  • 119
  • 119
  • 88
  • 16,5

Origem

:user-invalid

Compatibilidade com navegadores

  • 119
  • 119
  • 88
  • 16,5

Origem

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

Seletores de pseudoclasse de interação do usuário

Os seletores de pseudoclasse :user-valid e :user-invalid são semelhantes às pseudoclasses atuais :valid e :invalid. Ambos correspondem a um controle de formulário com base no fato de o valor atual atender ou não as 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 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 os controles de entrada, seleção e área de texto, conforme mostrado nos exemplos a seguir:

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 dos controles estão em cinza e o texto de ajuda abaixo explica que cada controle corresponderá atualmente ao seletor de pseudoclasse :invalid. A segunda captura de tela mostra o mesmo formulário depois que um usuário fornece uma entrada para cada controle. As bordas dos controles são verdes e o texto de ajuda abaixo explica que cada controle atualmente corresponde aos seletores de pseudoclasse :valid e :user-valid. A terceira e última captura de tela mostra o mesmo formulário depois que o usuário remove todas as entradas. As bordas de controle são vermelhas e o texto de ajuda abaixo explica que cada controle corresponderá aos seletores de pseudoclasse :invalid e :user-invalid.

Os seletores fazem a correspondência 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 vê-los em ação:

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 era necessário para acompanhar o valor inicial, o estado de foco atual da entrada, 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 lidar com tudo isso automaticamente.

Mais recursos

Foto da capa de Behzad Ghaffarian no Unsplash (links em inglês).