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

Confira um exemplo de implementação de validação de formulário simples com html, css e jQuery.

Oi pessoal, semana passada publiquei aqui no blog a primeira parte deste tutorial sobre a validação de formulários utilizando html, css e jQuery.

Como eu expliquei na semana passada utilizo uma lógica simples baseada em 3 princípios:

  • As mensagens de erro são inclusas no html e ocultas via css
  • Quando algum critério não é atendido o contador de erros é aumentado em um e a mensagem é exibida
  • Caso não exista nenhum erro o formulário é postado

O arquivo CSS

Em nosso arquivo css temos o estilo das mensagens de erro que serão exibidas em vermelho abaixo dos inputs.

Confira o código abaixo:

O arquivo JS

O arquivo JS é responsável por controlar o fluxo da aplicação e possui uma lógica bem simples que segue o fluxo:

  • Inicia o contador de erros em zero
  • Valida se o nome esta vazio
  • Valida se o email esta vazio
  • Valida se a senha esta vazia
  • Valida se a senha confere com a confirmação de senha
  • Caso qualquer validação esteja incorreta aumenta 1 no contador de erros
  • Caso o contador de erros seja igual a zero posta o formulario

Para validar e invalidar campos utiliza as funções setValid e setInvalid que você pode ver abaixo

As funções setValid e setInvalid

São as funções responsáveis por alterar os inputs para verde ou vermelho de acordo com a situação do input.

Veja as funções abaixo:

É isso pessoal espero que tenha ficado clara a mecânica para validação de formulários com jQuery e CSS. Essa base pode ser utilizada para quase qualquer situação, adicionando novas validações como formatos de CPF, Email etc, até validações de back-end que utilizam o Ajax do Jquery, mas isso é assunto para os próximos posts…

 

Leave a Reply

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