:user-valid
:user-invalid
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>
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
- :user-valid - documentos da Web do MDN
- :user-invalid - documentos da Web do MDN
- Pseudoclasses de interação do usuário: rascunho do editor do W3C (link em inglês)
- Validação de restrição de formulário: documentos da Web do MDN
- Tutorial de acessibilidade dos Formulários Google: iniciativa de acessibilidade na Web
Foto da capa de Behzad Ghaffarian no Unsplash (links em inglês).