Atividade - Validação Simples de Formulários

Utilizando a mesma estrutura de CSS das aulas anteriores, crie alguma duas páginas, uma de login e outra página de cadastro.

Na página de Cadastro terão os seguintes campos: Nome, Email, Senha e Confirmar Senha. Na página de Login somente os campos de Email e Senha. Em ambos os formulários não esqueçam de colocar o botão para que no futuro possamos atribuir algum evento para ação.

Na página cadastro.html

Na página de Cadastro, serão necessário fazer algumas validações com os campos de Senha:

1. A senha deve conter no mínimo 8 caracteres.
2. O campo senha e o campo confirmar senha devem ser iguais.
3. Coloque uma mensagem div oculta e exiba ela com as mensagens de validação. Por exemplo: "Senha deve conter mais de 08 caracteres" e/ou "Senhas não conferem!".

Na página login.html

Na página de Login é necessário fazer apenas duas validações: Se o campo email está preenchido com [email protected] e a senha seja "0123456789", caso contrário exibir uma mensagem em uma div oculta, notificação que não tem acesso (em vermelho), caso seja correto, exiba a mensagem "Credenciais corretas!".

Dicas para a página cadastro.html

1. Estruture o Formulário HTML:
• Crie um formulário (<form>) com campos para nome, email, senha e confirmação de senha. Use <input> para cada campo. Para os campos de senha, defina o tipo como password.
• Adicione botões ao lado dos campos de senha para permitir que o usuário mostre ou oculte a senha digitada. Esses botões não devem enviar o formulário, então defina o tipo deles como button.
2. Adicione IDs aos Elementos:
• Para facilitar a manipulação com JavaScript, atribua um id único a cada campo de entrada e botões no seu formulário.
3. Inclua Mensagens de Erro:
• Adicione um elemento, como uma <div>, onde as mensagens de erro podem ser exibidas. Isso será útil para mostrar feedback de validação ao usuário.
4. Escreva o Script JavaScript:
• Inicie com a seleção dos elementos do formulário usando document.getElementById ou document.querySelector para capturar os campos de entrada e botões.
• Adicione um ouvinte de evento de submit ao formulário. Dentro desta função, implemente a lógica de validação das senhas, verificando se elas são iguais e se têm o comprimento adequado.
5. Implemente a Função de Alternar Visibilidade da Senha:
• Crie uma função que alterne o tipo do campo de senha de password para text e vice-versa. Isso fará com que a senha seja mostrada ou ocultada.
• Essa função deve aceitar o id do campo de senha como argumento para saber qual campo está sendo manipulado.
6. Adicione Ouvintes de Eventos aos Botões de Mostrar/Ocultar Senha:
• Use addEventListener para adicionar um ouvinte de evento de clique a cada botão que controla a visibilidade da senha. Esses ouvintes devem chamar a função de alternância de visibilidade da senha.
7. Teste e Valide:
• Antes de considerar a tarefa concluída, faça testes para garantir que tudo esteja funcionando como esperado. Verifique se as senhas são validadas corretamente e se os botões de mostrar/ocultar estão funcionando.
8. Estilize o Formulário (Opcional):
• Para melhorar a experiência do usuário, aplique estilos CSS ao formulário. Isso inclui estilizar os campos de entrada, botões e mensagens de erro para tornar o formulário visualmente agradável e fácil de usar.

Dicas para a página de login.html

1. Crie a Estrutura HTML da Página de Login:
• Inclua dois campos de entrada (<input>): um para o email e outro para a senha. Certifique-se de que o campo de senha seja do tipo password.
• Adicione um botão de submit para enviar o formulário.
• Crie uma <div> onde as mensagens de erro ou sucesso serão exibidas. Inicialmente, esta <div> pode estar oculta.
2. Adicione IDs aos Elementos do Formulário:
• Atribua ids aos campos de entrada e ao botão para facilitar a referência no JavaScript. Por exemplo, id="email", id="senha" e id="botao-login".
• Dê um id à <div> de mensagens, como id="mensagem".
3. Escreva o JavaScript para a Validação:
• Capture os elementos do formulário usando document.getElementById.
• Adicione um ouvinte de evento click ou submit ao botão de login.
• Na função do evento, verifique se o email e a senha correspondem aos valores esperados ("[email protected]" e "0123456789").
• Se as credenciais estiverem corretas, atualize a <div> de mensagem com "Credenciais corretas!" e mude a cor do texto para verde (ou outra cor de sua preferência).
• Se as credenciais estiverem incorretas, atualize a <div> de mensagem com "Não tem acesso" e mude a cor do texto para vermelho.
• Lembre-se de tornar a <div> de mensagem visível quando atualizar o texto.
4. Estilize a Página (Opcional):
• Use CSS para estilizar a página de login, incluindo os campos de entrada, botão e a <div> de mensagem. Para a <div> de mensagem, você pode inicialmente defini-la como oculta (display: none;) e alterar para visível no JavaScript quando necessário.
5. Teste a Página:
• Faça testes para garantir que a validação esteja funcionando conforme esperado. Teste tanto com as credenciais corretas quanto com credenciais incorretas para verificar se as mensagens apropriadas são exibidas.

Enviar atividade:

https://forms.office.com/r/Cyr0SpgqP2