Saiba mais sobre Validação de formulários de uma forma simples e elegante sem complicar seu código.
Bom dia pessoal, hoje é terça-feira dia de falar de código aqui no blog e colocar a mão na massa, hoje vou abordar um assunto que apesar de ser básico no desenvolvimento web: Validação de formulários,porém ainda gera muitas dúvidas e dor de cabeça para os desenvolvedores, principalmente os iniciantes, a validação de dados em formulários.
Nesses mais de 10 anos na área já vi todo tipo de validação, com JS, no Backend, Híbrida e feita das formas mais entranhas possíveis. Bom, depois de penar bastante com esse assunto consegui definir um padrão para o meu desenvolvimento que facilitou muito a minha vida, o modelo é baseado em Jquery, Html e css puros e se necessário alguma validação de banco de dados utilizo um script de back end.
A construção do HTML
Como minha Validação de formulários é baseada apenas em HTML, Js e Css, o primeiro passo é a construção do html, nesse exemplo do artigo vamos construir um formulário bem simples para cadastro de nome, cpf, e-mail e senha com um campo para confirmação da senha, veja o exemplo de construção do html abaixo:
Como você pode ver no exemplo acima, cada campo é composto de 3 elementos a label ou nome do campo, o campo efetivamente através do elemento input e uma mensagem de erro que é inserida dentro do elemento span.
A lógica de validação
A lógica para validação exibição de erros e efetiva postagem dos dados seguem algumas premissas simples:
- O texto das mensagens de erro constantes nos elementos SPAN com a class erro são ocultas inicialmente
- Quando algum critério de validação não é respeitado a mensagem é exibida
- Caso não exista nenhum erro o formulário é postado
Esses são o 3 princípios utilizados nessa validação, no próximo artigo vou trazer para vocês o exemplo do css e do script Jquery responsável pela validação.
Até a próxima!