As pseudoclasses :user-valid e :user-invalid

:user-valid

Compatibilidade com navegadores

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Origem

:user-invalid

Compatibilidade com navegadores

  • Chrome: 119
  • Borda: 119.
  • Firefox: 88.
  • Safari: 16.5.

Origem

A entrada do usuário é uma das preocupações mais sensíveis em qualquer interface do usuário. Um elemento aplicativo deve ajudar os usuários a ver, compreender e corrigir quaisquer erros em seus 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 muda a entrada. Com esses novos seletores, não há mais um escrever código com estado para acompanhar as entradas alteradas pelo usuário.

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, vantagem das novas pseudoclasses :user-valid e :user-invalid é que elas fazem a correspondência com um controle de formulário somente após a interação significativa do usuário 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 cinzas, 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 fornece entradas para cada controle. As bordas dos controles são verdes e o texto de ajuda abaixo explica que, no momento, cada controle corresponderá aos seletores da 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, no momento, 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 validação restrições. 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.