quarta-feira, 24 de março de 2010

Validação simples de formulário com Jquery utilizando classes do CSS

Olá pessoal.

Confesso que uma das piores etápas que considero para fazer formulário é a validação. Após alguns estudos desenvolvi uma maneira bem simples de evitar que os campos não sejão enviados em branco.

Vou mostrar um maneira bem simples de validar (fazer com que os campos não sejam enviados em branco) formulário em jquery.

Vamos começar pelo formulário:











Reparem que coloquei um id na tag form, isso para aproveitá-lo atrevés do jquery.
Nos campos que serão obrigatórios é necessário definir o atributo 'title', que será usado no alert caso o campo esteja em branco e a class 'val', na qual o jquery irá varrer para a validação.

Vamos agora analisar o arquivo js:


Depois das funções básica do ready, vamos usar o id configurado no formulário para após submeter o formulário ele fazer as verificações.
Na linha 6 defino a variável que irá contar quantas classes 'val' existem no formulário. Através dela crio um laço 'for' para varrer uma por uma.
Na linha 9 a variável 'len' é responsável por verificar a quantidade de caracteres no input. para quem não conhece a função eq() do jquery, é como se os elementos definidos por ela se tornacem um array. Por exemplo: dentro de uma div(class='prg') existem duas tags P. Para selecionar a primeira tag utilizamos

$(".prg p").eq(1).html(); // esse exemplo pegaria o html dentro da 1º tag p da class prg;

Na linha 10, como citei, é reponsável por pegar o title do input para mostrar no alert caso esteja em branco.
Após a verificação através do if e ocorrer tudo certo, o formulário é enviado.

Espero que ajude no corre-corre do dia-dia.

;D