leitura de
Encontrou um problema no conteúdo? Por favor, deixe seu comentário!

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! :)

Thiago Belem / Blog

Thiago Belem


Publicado

Thiago Belem / Blog

Thiago Belem / Blog

Artigos e tutoriais sobre desenvolvimento WEB

Continue lendo