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…