Eu te desafio!

Para colocarmos em prática o que vimos até aqui,
lembre-se, programação só vinga se praticar, resolva o seguinte:

  1. Crie uma página com um formulário para que o usuário possa entrar em contato que possua entradas de texto com seus respectivos labels para:
    • Nome;
    • Sobrenome;
    • E-mail;
    • Telefone;
    • Assunto;
    • Mensagem.
  2. Insira um botão para enviar a mensagem;
  3. Crie uma área de mensagem com a tag “section” para receber o conteúdo dinâmico na página;
  4. Crie um arquivo JavaScript chamado “script.js” para inserir o código e o inclua na página HTML via tag script;
  5. Crie a função “validarDados” dentro do arquivo “script.js” e siga a seguinte lógica:
    • Pegue a área de mensagem pelo id e todos os campos do formulário via seletor;
    • Crie um array de erros vazio;
    • Crie um contador de erros começando com 0;
    • Faça um loop pelos campos;
    • Se algum campo estiver vazio:
      • Coloque o campo dentro do array de erros;
      • Incremente o contador de erros.
    • Fora do loop, se o contador de erros for maior que 0, monte uma mensagem de erro com:
      • O título sendo um h2 tendo o atributo tabindex para receber foco via JavaScript e com o texto “Existem X erros no formulário” (X é igual ao “contador de erros”);
      • Um parágrafo com o texto: “Corrija os campos a seguir:”;
      • Crie uma lista e faça um loop pelo array de erros e monte cada item de lista dentro do loop, contendo um link com o rotulo: “O campo X não deve ficar vazio” e o link deve apontar para o respectivo campo (X significa o rótulo do campo);
      • Finalize a lista fora do loop e depois insira o HTML gerado dentro da área de mensagens.
    • Mas se o contador de erros não for maior que 0, gere o seguinte HTML:
      • O título sendo um h2 tendo o atributo tabindex para receber foco via JavaScript e com o texto “Confirmação de envio de dados”;
      • Um parágrafo com o texto: “Verifique se os dados a seguir foram preenchidos corretamente:”;
      • Crie uma lista e faça um loop pelo array de campos e monte cada item de lista dentro do loop, contendo um link com o rotulo: “[label do campo]: [valor do campo]” e o link deve apontar para o respectivo campo;
      • Finalize a lista fora do loop;
      • Insira também no HTML gerado um botão com o atributo “onclick” que chama uma função chamada “enviarMensagem” e o rótulo sendo “Confirmar e enviar os dados preenchidos”;
      • Depois insira o HTML gerado dentro da área de mensagens.
    • Fora do if-else, dê foco no h2 que deve estar dentro da área de mensagens;
  6. Crie a função “enviarMensagem”:
    • Dê um alerta dizendo: “Agradecemos pela mensagem!”;
    • Pegue o formulário e chame sua função “submit()”.
  7. Depois de criar essas funções, chame a função “validarDados” adicionando um listener:
    • Fora das funções, pegue o formulário via seletor e adicione um ouvinte de evento para o evento “submit” atrelado à uma função anônima;
    • Dentro da função anônima, cancele o comportamento padrão do evento “submit” (que seria enviar o formulário) e chame a função “validarDados”. Isso deve ser feito da seguinte maneira:
      
      formulario.addEventListener("submit", function (event) {
        event.preventDefault();
        validarDados();
      });
      
      

E não se esqueça: independentemente de qualquer coisa, continue desenvolvendo!

Materiais utilizados