JavaScript

Responder a eventos de formulário

Você pode usar o JavaScript para responder a interações do usuário no seu formulário, revelar campos adicionais do formulário, enviar um formulário e muito mais.

Ajudar os usuários a preencher outros controles de formulários

Imagine que você criou um formulário de pesquisa. Depois que um usuário seleciona uma opção, você quer mostrar mais uma <input> para fazer uma pergunta específica relacionada à seleção. Como você pode mostrar apenas o elemento <input> relevante?

Você pode usar o JavaScript para revelar uma <input> somente quando o <input type="radio"> associado está selecionado no momento.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Vamos analisar Código JavaScript para a demonstração. Você notou os atributos aria-controls e aria-expanded? Use estas Atributos ARIA para ajudar os usuários de leitores de tela a entender quando um controle de formulário adicional é mostrado ou ocultado.

Garanta que os usuários possam enviar um formulário sem sair de uma página

Imagine que você tenha um formulário de comentários. Quando um leitor adiciona um comentário e envia o formulário, seria ideal se eles pudessem ver o comentário imediatamente sem atualizar a página.

Para fazer isso, detecte o evento onsubmit e use event.preventDefault() para evitar o comportamento padrão. e envie o FormData usando a API Fetch.

Compatibilidade com navegadores

  • Chrome: 42.
  • Borda: 14.
  • Firefox: 39.
  • Safari: 10.1.

Origem

O script de back-end pode verificar se uma solicitação POST parece ser do navegador. (usando o atributo action de um elemento de formulário, em que method="post") ou do JavaScript, como uma solicitação fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Sempre notifique os usuários do leitor de tela sobre as mudanças no conteúdo dinâmico. Adicione um elemento com o atributo aria-live="polite" ao HTML. e atualizar o conteúdo do elemento após uma alteração. Por exemplo, atualize o texto para "Seu comentário foi postado com sucesso" depois que um usuário enviar um comentário.

Saiba mais sobre as regiões ativas ARIA.

Validação com JavaScript

Verifique se as mensagens de erro estão alinhadas com o estilo e o tom do site

O texto das mensagens de erro padrão varia de acordo com o navegador. Como garantir que a mesma mensagem seja exibida para todos os usuários, e que a mensagem esteja alinhada com o estilo e tom do seu site? Usar o setCustomValidity() método da API Constraint Validation para definir suas próprias mensagens de erro.

Garanta que os usuários sejam notificados sobre erros em tempo real

Os recursos HTML integrados para validação de formulários são ótimos para notificar os usuários sobre campos de formulário inválidos antes que os dados sejam enviados ao back-end. Não seria ótimo notificar os usuários assim que eles saírem de um campo do formulário?

Ouça o blur que é acionado quando um elemento perde o foco, e use o ValidityState para detectar se um controle de formulário é inválido.

Garantir que os usuários tenham acesso à senha inserida

O texto digitado para <input type="password"> fica oculto por padrão, para respeitar a privacidade dos usuários. Ajude os usuários a inserir a senha mostrando uma <button> para alternar a visibilidade do texto inserido.

Confira a demonstração. Ative ou desative o visibilidade do texto inserido usando o botão Mostrar senha <button>. Como funciona? Clique em Mostrar senha. muda o atributo type do campo de senha de type="password" para type="text". e o texto <button> muda para "Ocultar senha".

É importante tornar o botão Mostrar senha acessível. Conecte a <button> à <input type="password"> usando o atributo aria-controls.

Para notificar os usuários do leitor de tela se a senha estiver sendo exibida ou ocultada, faça o seguinte: usar um elemento oculto com aria-live="polite" e mudar o texto de acordo com isso. É importante permitir que os usuários de leitores de tela saibam quando uma senha é exibida e está visível para outra pessoa olhando para a tela.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Saiba mais sobre como implementar uma opção de mostrar senha.

Recursos