Ohay! :-D
Hoje vou demonstrar como vocês podem criar uma validação de campos (inputs) usando jQuery (JavaScript) e um plugin dele. Vamos verificar, por exemplo, se todos os campos foram preenchidos ou não.. ou se os seus valores estão ok.
Veja um exemplo do que será aprendido nessa aula: /exemplo2/
Usarei como exemplo um formulário de contato que é o mais comum por ai… Vamos ao passo-a-passo:
Faça o download da última versão do jQuery no site: http://jquery.com/ Faça o download do plugin Validation no site: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Insira-os dentro do <head> do seu site, da seguinte forma:
Após isso, criamos um pequeno bloco de CSS para estilizar as mensagens de erro:
Ainda dentro do head, depois de inserir o jQuery e o estilo das mensagens de erro, precisaremos adicionar um bloco de JavaScript contendo instruções para a validação:
Por fim, inserimos o HTML do formulário na pagina:
Viram como é fácil? O arquivo final ficou desta forma. Se você preferir pode copiar todo esse código JavaScript para um arquivo .js e incluí-lo no <head> do seu site da mesma forma que fizemos no começo da aula.
Coloquei alguns comentários na parte das instruções de validação para facilitar o entendimento.
Com isso você faz uma validação client-side que ajuda a evitar dados inválidos e campos vazios. Mas preciso lembrar que, por ser client-side, essa validação acontece apenas no computador do visitante e o mesmo pode desativar o JavaScript e a validação toda não irá funcionar. Então não se esqueça de fazer a mesma validação dentro do PHP quando receber os dados.
Veja o exemplo desta aula funcionando: /exemplo2/
Mais exemplos de validações diferentes podem ser encontrados no site do plugin: http://jquery.bassistance.de/validate/demo/
Abraços e até a próxima! :)