Validação de Formulários com JavaScript

A aprendizagem ativa funciona especialmente bem neste tópico porque exige que os alunos testem, corrijam e melhorem o código em tempo real, o que reforça a compreensão prática dos conceitos. Ao validar formulários com JavaScript, os alunos veem imediatamente o impacto das suas decisões no código, tornando a abstração mais concreta e memorável.

• 12° Ano
• Inovação Digital e Pensamento Computacional Avançado
• 4 atividades
• 20 min–50 min

Objetivos de Aprendizagem

1. Criar funções JavaScript que validem formatos de email e números de telefone em campos de formulário.
2. Comparar a eficácia e as limitações da validação do lado do cliente versus a validação do lado do servidor.
3. Analisar os riscos de segurança associados a dados de formulário não validados, como ataques de injeção.
4. Demonstrar a implementação de mensagens de erro dinâmicas para feedback imediato ao utilizador.
5. Avaliar a usabilidade de um formulário web com base nas suas mensagens de validação e feedback.

Aprendizagem Baseada em Problemas

⏱ 30 min·Pares

Pair Programming: Validação de Email

Os pares criam um formulário simples com campo de email e implementam uma função JavaScript com expressão regular para validar o formato. Testam com entradas inválidas e ajustam mensagens de erro. Partilham o código com a turma para feedback.

Preparação e detalhes

Como podemos validar dados do utilizador antes de os processar?

Sugestão de Facilitação: Durante a Pair Programming de validação de email, peça aos pares para alternarem entre o papel de quem escreve o código e o papel de quem testa os limites da validação.

Setup: Grupos organizados em mesas com acesso a materiais de investigação

Materials: Documento com o cenário do problema, Quadro KWL ou estrutura de inquiry, Biblioteca de recursos, Modelo para apresentação da solução

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Aprendizagem Baseada em Problemas

⏱ 45 min·Pequenos grupos

Small Groups: Formulário Completo

Em grupos de quatro, os alunos constroem um formulário de registo com validações para nome, email, palavra-passe e telefone. Usam eventos onsubmit e onblur para feedback imediato. Apresentam e testam mutuamente os formulários.

Preparação e detalhes

Analise os riscos de segurança associados à falta de validação de formulários.

Sugestão de Facilitação: Na atividade de Formulário Completo em pequenos grupos, forneça um template com campos de diferentes tipos para garantir que todos abordam pelo menos um cenário de validação complexo.

Setup: Grupos organizados em mesas com acesso a materiais de investigação

Materials: Documento com o cenário do problema, Quadro KWL ou estrutura de inquiry, Biblioteca de recursos, Modelo para apresentação da solução

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Aprendizagem Baseada em Problemas

⏱ 20 min·Turma inteira

Whole Class: Debug Challenge

Projeta formulários com erros comuns no quadro ou online. A turma discute e corrige coletivamente, identificando falhas em validações client-side. Registam lições aprendidas num quadro partilhado.

Preparação e detalhes

Explique a diferença entre validação do lado do cliente e do lado do servidor.

Sugestão de Facilitação: No Debug Challenge em turma, altere propositadamente um erro no código partilhado para que os alunos tenham de detetar e corrigir problemas de lógica ou de sintaxe.

Setup: Grupos organizados em mesas com acesso a materiais de investigação

Materials: Documento com o cenário do problema, Quadro KWL ou estrutura de inquiry, Biblioteca de recursos, Modelo para apresentação da solução

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Aprendizagem Baseada em Problemas

⏱ 50 min·Individual

Individual: Projeto de Melhoria

Cada aluno escolhe um formulário web existente e adiciona validações JavaScript avançadas, como confirmação de palavra-passe. Testa em diferentes browsers e documenta melhorias na segurança.

Preparação e detalhes

Como podemos validar dados do utilizador antes de os processar?

Sugestão de Facilitação: No Projeto de Melhoria individual, forneça um formulário com validações básicas para que os alunos possam aplicar melhorias específicas, como mensagens de erro mais claras ou validações adicionais.

Setup: Grupos organizados em mesas com acesso a materiais de investigação

Materials: Documento com o cenário do problema, Quadro KWL ou estrutura de inquiry, Biblioteca de recursos, Modelo para apresentação da solução

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Autogestão
• Competências Relacionais

Ensinar Este Tópico

Este tópico deve ser ensinado com uma abordagem prática e iterativa, onde os alunos começam com validações simples e gradualmente adicionam complexidade. É importante evitar aulas teóricas longas sobre expressões regulares; em vez disso, introduza conceitos como 'formato de email' ou 'comprimento de palavra-passe' através de exemplos concretos e problemas reais. Pesquisas sugerem que a aprendizagem baseada em erros, onde os alunos tentam contornar as suas próprias validações, aumenta a retenção e a compreensão das limitações da validação client-side.

O Que Esperar

No final destas atividades, espera-se que os alunos consigam implementar validações funcionais em formulários web, detetar erros comuns em tempo real e justificar a importância da validação server-side. Espera-se também que comuniquem feedback claro e seguro para os utilizadores.

Atenção a estes erros comuns

Erro comum

Durante a atividade de Pair Programming: Validação de Email, alguns alunos podem assumir que a validação client-side é suficiente para garantir a segurança do sistema.

O que ensinar em alternativa

Durante a Pair Programming: Validação de Email, peça aos pares para simularem um ataque básico, como enviar dados diretamente para o servidor via ferramentas de developer, para demonstrarem que a validação server-side é indispensável. Discutam depois como o código que escreveram poderia ser contornado e que soluções server-side seriam necessárias.

Erro comum

Durante a atividade de Formulário Completo em pequenos grupos, alguns alunos podem acreditar que JavaScript valida automaticamente todos os tipos de dados.

O que ensinar em alternativa

Durante o Formulário Completo, forneça um exemplo de código com erros comuns de validação, como uma regex incompleta para email, e peça aos grupos para identificarem e corrigirem os problemas. Peça-lhes também para compararem as suas soluções e discutirem porque é que padrões específicos exigem validação manual.

Erro comum

Durante a discussão em turma do Debug Challenge, alguns alunos podem pensar que mensagens de erro vagas não afetam a segurança da aplicação.

O que ensinar em alternativa

Durante o Debug Challenge, proponha um cenário onde um atacante pode inferir informações sensíveis a partir de mensagens de erro, como 'Palavra-passe demasiado curta' vs 'Palavra-passe deve ter pelo menos 8 caracteres'. Peça aos alunos para reescreverem as mensagens do formulário de forma a prevenir tais inferências.

Ideias de Avaliação

Verificação Rápida

Depois da atividade Pair Programming: Validação de Email, apresente um trecho de código JavaScript com uma função de validação de email incompleta ou com erros lógicos. Peça aos alunos para identificarem o tipo de validação (ex: formato de email), o que está errado no código e como o corrigiriam para detetar emails inválidos.

Bilhete de Saída

Depois da atividade de Formulário Completo em pequenos grupos, distribua um formulário web simples (sem validação) e peça aos alunos para escreverem duas regras de validação em JavaScript que gostariam de adicionar. Peça também para incluírem uma razão específica pela qual a validação server-side é crucial, mesmo com a validação client-side.

Questão para Discussão

Durante o Debug Challenge em turma, coloque a seguinte questão para discussão: 'Se um formulário tem validação robusta do lado do cliente, é realmente necessário ter validação do lado do servidor? Justifique a resposta com exemplos de riscos de segurança, como injeção de código ou manipulação de dados via ferramentas de developer.'

Extensões e Apoio

• Desafio: Peça aos alunos que implementem uma validação personalizada para um campo de número de contribuinte português (NIF) e criem testes unitários para verificar a validade do código.
• Scaffolding: Para alunos que struggle, forneça um guia passo-a-passo com pseudocódigo ou um exemplo parcialmente funcional para que possam completar a atividade com confiança.
• Deeper exploration: Sugira aos alunos que pesquisem e implementem uma validação mais avançada, como a verificação de força de palavra-passe com critérios como caracteres maiúsculos, minúsculos, números e símbolos.

Vocabulário-Chave

Validação do lado do cliente	Verificação de dados de entrada realizada no navegador do utilizador através de JavaScript, proporcionando feedback rápido.
Validação do lado do servidor	Verificação de dados de entrada realizada no servidor web, essencial para a segurança e integridade dos dados.
Expressões regulares (Regex)	Sequências de caracteres que definem um padrão de pesquisa, usadas para validar formatos complexos de texto.
Eventos DOM	Sinais enviados pelo navegador quando algo acontece numa página web, como um clique ou a submissão de um formulário, que o JavaScript pode capturar.
Injeção de SQL	Um tipo de ataque cibernético onde código malicioso é inserido em comandos SQL, explorando vulnerabilidades de validação de dados.