Eu te desafio!
Para colocarmos em prática o que vimos até aqui,
lembre-se, programação só vinga se praticar, resolva o seguinte:
- 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.
- Insira um botão para enviar a mensagem;
- Crie uma área de mensagem com a tag “section” para receber o conteúdo dinâmico na página;
- Crie um arquivo JavaScript chamado “script.js” para inserir o código e o inclua na página HTML via tag script;
- 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;
- Crie a função “enviarMensagem”:
- Dê um alerta dizendo: “Agradecemos pela mensagem!”;
- Pegue o formulário e chame sua função “submit()”.
- 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!