logo

Validando formulários com jQuery

Validar formulários é uma das tarefas mais corriqueiras de um profissional web.
Com jQuery, torna-se bem mais simples esta tarefa.

Dê uma olhada… Tenho certeza que você vai gostar!

Continue lendo…

Jquery – Primeiros passos

Um tutorial que explica como você pode iniciar com jQuery. Um explicação de sua sintaxe e como iniciar neste framework que é um sucesso!

No começo, é comum esbarrar-se com a dificuldade de entender a sintaxe. A quantidade de “()” e “{}” pode atrapalhar um pouco. Mas com o tempo, esta dificuldade é superada.

Para começar, você deve acessar o site do framework e baixar a sua última versão. Acesse http://www.jquery.com e faça o download.

Continue lendo…

Jump menu utilizando jQuery

Uma vídeo aula que explica passo-a-passo a criação de um jump menu utilizando jQuery + Dreamweaver

Por que jQuery?

Uma resposta rápida e corriqueira: “Para não reinventar a roda”. Esta é a proposta deste framework. Um exemplo prático é a validação de formulários. Definitivamente, é maçante perder horas preciosas para definir uma dezena de “if’s” que bloqueiam possíveis emails incorretos, etc. jQuery é tornar isto muito rápido, simples e extremamente profissional.

Profissionalismo é um outro ponto importantíssimo. Você torna-se capaz de criar páginas com recursos altamente sofisticados sem a necessidade de recorrer ao Flash com suas limitações. Além de parar com as preocupações com a compatibilidade entre navegadores, pois jQuery funciona com o IE6, FF, Chrome, IE7 e IE8 igualmente! O framework já foi feito com este intuito.

O código abaixo é um exemplo bem simples e prático do ganho de tempo que jQuery vai lhe oferecer.

Mesmo que você não conheça jQuery, tenho certeza que entenderá o que o código abaixo faz.

  1. $(“#formulario”).validate({
  2.  
  3.             //Definindo em qual DIV as mensagens de erros aparecerão
  4.             errorLabelContainer: $(“#erros”),
  5.  
  6.             //Quais são as regras para cada campo Input, textarea, etc
  7.             rules:
  8.             {
  9.                 nome:
  10.                 {
  11.                     required:true,
  12.                     minlength:5
  13.                 },
  14.                 email:
  15.                 {
  16.                     required:true,
  17.                     email:true
  18.                 },
  19.                 senha:
  20.                 {
  21.                     required:true,
  22.                     minlength:8
  23.                 },
  24.                 confirmacao_senha:
  25.                 {
  26.                     required:true,
  27.                     minlength:8,
  28.                     equalTo:“#senha”
  29.                 }
  30.                
  31.                
  32.             },
  33.            
  34.             // Definindo a mensagem de erro para cada campo incluso em “rules”
  35.             messages:
  36.             {
  37.                 nome:
  38.                 {
  39.                     required:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>O campo nome deve ser preenchido<br/>”,
  40.                     minlength:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>Nome inválido<br/>”
  41.                 },
  42.                 email:
  43.                 {
  44.                     required:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>O email é obrigatório<br/>”,
  45.                     email:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>Email inválido.<br/>”
  46.                 },
  47.                 senha:
  48.                 {
  49.                     required:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>É necessário informar uma senha<br/>”,
  50.                     minlength:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>Sua senha precisa ter no mínimo 8 caracteres<br/>”
  51.                 },
  52.                 confirmacao_senha:
  53.                 {
  54.                     required:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>É necessário confirmar sua senha<br/>”,
  55.                     minlength:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>Sua senha precisa ter no mínimo 8 caracteres<br/>”,
  56.                     equalTo:“<img src=\”imagens/erro.png\” alt=\”erro\” align=\”top\”/>As senhas não coincidem<br/>”
  57.                 }
  58.                
  59.             }
  60.         });
  61.  

Tenho certeza que você já precisou validar um formulário e perdeu tempo e paciência para criar algo que é primordial.

Pra finalizar, veja algumas das empresas/entidades que utilizam o jQuery em seus sites:

Dell
Google
Mozilla
Digg
Wordpress
Drupal
NBC 

Vale a pena, não?

Categorias

Arquivos