Validação de Formulário

O objetivo principal deste projeto é praticar a validação dos campos de um formulário para criação de conta em um banco chamado "Moni Bank". Através de atributos de dados (data attributes), inputs e condições, foram definidas regras específicas para cada campo. Quando um campo estiver preenchido corretamente, o usuário poderá prosseguir, mas se houver algum erro, uma mensagem de erro será exibida e o usuário não poderá continuar.

Condições para Validações dos Campos:

• Como regra geral, foi definido que todos os campos precisam estar preenchidos para conseguir prosseguir, o que foi possível através do atributo "required".
• Para o "Nome", foi definido um input de tipo texto e tamanho mínimo de 3 caracteres.
• Para o "E-mail", foi definido um input de tipo email e tamanho mínimo de 4 caracteres.
• Para o "RG", foi definido um input de tipo texto com tamanho mínimo de 6 caracteres, sem um tamanho máximo específico, já que cada estado do Brasil possui uma identificação diferente de RG, não seguindo um padrão como o CPF. Além disso, foi imposto a condição de não ter todos os seus caracteres iguais, aceitando números e letras.
• Para o "CPF", foi definido um input de tipo texto com tamanho mínimo de 11 caracteres e tamanho máximo de 14, permitindo que o usuário insira pontos e hífen, ex.: "032.144.353-00". A condição de não ter caracteres iguais também foi aplicada, aceitando apenas números. Foi implementada uma função para validar o primeiro dígito após o hífen e outra para o segundo dígito, utilizando um loop "for" e uma operação de módulo para obter o valor do dígito verificador a ser comparado. Caso o valor do dígito verificador seja igual a 10 ou 11, é atribuído o valor 0. Ao final, é feita a comparação entre o dígito verificador obtido e o dígito verificador fornecido no CPF digitado pelo usuário. Se forem diferentes, a função retorna true, indicando que o dígito é inválido e, consequentemente, exibirá uma mensagem de erro. Caso contrário, retorna false e o CPF estará correto.
• Para a "Data de nascimento", foi definido um input do tipo data com a condição de ser maior de 18 anos, permitindo assim a criação da conta.

Outras Informações

• Ao entrar no site, o usuário deve clicar no botão "Abrir conta" para acessar o formulário de preenchimento.
• Após preencher corretamente todos os campos do formulário, o usuário será redirecionado para a tela de reconhecimento facial.
• Na tela de reconhecimento facial, o usuário deverá permitir o uso da câmera e enviar sua imagem para prosseguir.
• Após o envio da imagem, o usuário será direcionado para a tela final, onde receberá a mensagem "Tudo certo!", com outras informações adicionais.

Screenshots

Desktop

Simulação de Erro

Tablet

Mobile

Feito por:

Nayra Braga Barbosa

Linkedin: https://www.linkedin.com/in/nayra-barbosa/