JavaScript

Responder a eventos de formulário

Você pode usar o JavaScript para responder às interações do usuário no formulário, mostrar outros campos, enviar um formulário e muito mais.

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

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

Você só pode usar o JavaScript para revelar um <input> quando o <input type="radio"> associado estiver selecionado.

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

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

Os usuários podem enviar um formulário sem sair da 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 que ele pudesse conferir o comentário imediatamente sem precisar atualizar a página.

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

Browser Support

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

Source

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, onde 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 de leitores de tela sobre mudanças dinâmicas no conteúdo. Adicione um elemento com o atributo aria-live="polite" ao HTML e atualize o conteúdo do elemento após uma mudança. Por exemplo, atualize o texto para "Seu comentário foi postado" depois que um usuário enviar um comentário.

Saiba mais sobre as regiões ativas da ARIA.

Validação com JavaScript

Confira se as mensagens de erro estão alinhadas ao estilo e ao tom do seu site

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

Notificar os usuários 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 de formulário?

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

Garantir que os usuários possam ver a senha inserida

O texto inserido para <input type="password"> é obscurecido por padrão para respeitar a privacidade dos usuários. Ajude os usuários a digitar a senha mostrando um <button> para alternar a visibilidade do texto digitado.

Teste a demonstração. Alterne a visibilidade do texto inserido usando Mostrar senha <button>. Como funciona? Clicar 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 o <button> ao <input type="password"> usando o atributo aria-controls.

Para notificar os usuários de leitores de tela se a senha está visível ou oculta, use um elemento oculto com aria-live="polite" e mude o texto de acordo. É importante permitir que os usuários de leitores de tela saibam quando uma senha é exibida e visível para outra pessoa que estiver olhando 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 a senha.

Recursos