Validação de formulários com Jquery, uma abordagem simples… | Parte 1

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!

Leave a Reply

Your email address will not be published. Required fields are marked *