AT-VI-DEV-WEB-III

📘| Projeto: Validação de Formulário via DOM

📌 Descrição do Projeto

Este projeto foi desenvolvido como parte da Tarefa 6 (Aula 6) da disciplina Desenvolvimento Web II. O objetivo da atividade é explorar o DOM (Document Object Model) por meio da validação de um formulário utilizando JavaScript.

O sistema consiste em uma página web simples contendo um formulário de cadastro com os campos:

Nome

E-mail

Telefone (com DDD)

Todos os campos passam por validação em tempo real no momento do envio, utilizando operações do DOM.

🎯| Objetivos da Atividade

Criar uma nova branch chamada DOM no repositório. Desenvolver um formulário HTML e aplicar validações com JavaScript usando o DOM.

Validar:

Nome → mínimo 5 e máximo 40 caracteres

E-mail → deve conter o caractere "@"

Telefone → deve conter 11 dígitos (DDD + número)

Exibir mensagens de erro caso o usuário tente enviar dados inválidos.

Realizar o merge da branch DOM na main.

Produzir relatório/documentação (este README) com demonstração dos resultados.

🧱 Estrutura do Projeto

projeto_dom/
│
├── index.html      # Estrutura da página e formulário
├── script.js       # Código JS responsável pela validação via DOM
└── style.css       # Estilização da página

🖥️| Demonstração do Funcionamento

✔️ Formulário Implementado

O formulário contém campos básicos e uma área de mensagens que exibe erros ou confirmações.

🔍| Validações Implementadas

📌 1. Nome

Deve ter entre 5 e 40 caracteres

Se inválido → mensagem de erro exibida via DOM

📌 2. E-mail

Deve obrigatoriamente conter o caractere "@"

Caso contrário → erro exibido no DOM

📌 3. Telefone

Deve conter exatamente 11 dígitos numéricos

Caracteres especiais são ignorados quando validados (ex: (, ), -, espaço)

📌 4. Verificação de campos vazios

Se qualquer campo estiver vazio → "Preencha todos os campos."

🛠️| Passos executados no Git (para documentação do relatório)

➤ Criar nova branch
git checkout -b DOM

➤ Adicionar arquivos
git add .
git commit -m "Implementação da validação de formulário usando DOM"

➤ Enviar para o GitHub
git push origin DOM

➤ Fazer merge com a branch principal
git checkout main
git merge DOM
git push origin main

📄| Conclusão

Este projeto demonstra a manipulação do DOM através da validação dinâmica de um formulário, atendendo completamente aos critérios da Tarefa 6. O código segue boas práticas, é simples, direto e funcional, permitindo fácil entendimento do uso do JavaScript para validações no front-end.