Fala Galera!! clapping.gif
Quando o Dragun surgiu com seu validador eu fui o primeiro tester e gostei pra caramba. Mas tinha um problema: Era em Mootools!
Quase todos meus projetos são em JQuery e apesar de haver uma forma de usar os dois juntos, é uma gambiarra danada que eu não estou disposto a assumir (quanto mais gambi mais dor de cabeça no futuro).

Logo ficou a ideia de quando ele terminasse eu faria a versão JQuery do mesmo. Como o Validador dele já teve progressos interessantes eu venho aqui postar o meu.
Não pensem que estou aproveitando-me de o Dragun estar afastado do forum. Isso é um problema qual eu nada tenho haver e garanto que o mesmo aprova minha iniciativa em fazer o validador em outra linguagem. Na pior eu ele nos entendemos e se ele reclamar leva uma surra no guitarhero assobiando.gif

O JQuery Form Validator:
(nome feio da p*@%$*)

Download:
Como o nome já diz o JQuery Form Validator funciona baseado no JQuery e dele herda algumas coisas interessantes como o seu modo de selecionar os elementos.
Sem mais delongas, baixe os arquivos aqui.

Iniciando:
Feito isso vá até o documento onde deseja validar o formulário e instancie os arquivos *.js de sua forma preferida. Segue uma sujestão:
Código html
				
<script src="jquery-1.2.6.js" language="javascript" type="text/javascript"></script>
<script src="JQueryFormValidatorV0_1.js" language="javascript" type="text/javascript"></script>


Instanciando e Configurando:
Se os arquivos estiverem sendo chamados corretamente você já pode começar a instanciar o objeto e configurar.
Código javascript
				
$(function(){
var testform = new JQForm();//Instancia o Objeto JQForm na variavel testform

testform.setErrorMsg("Alguns Erros foram encontrados:\n\n");//Configura cabeçalho padrão do retorno de erros

testform.addParameter(".email1","isEmail[single]","E-mail inválido");//Adiciona um parametro de teste

//por fim, atribuo o retorno do metodo "Send" ao submit da minha tabela. OBS: Passando o parametro "alert" as mensagens de erro serão exibidas em um alert
$("#minhaTabela").submit(function(){
return testform.send("alert");
});
});

Métodos:
Até então já vimos os metodos setErrorMsg, addParameter e send. Por enquanto são apenas eles, vou explanar a função de cada um:
objeto.setErrorMsg([STRING:mensagem de erro]);
O método setErrorMsg define a mensagem de erro que aparecerá no cabeçalho do retorno de erros. Deve receber a mensagem numa String. Não faz nada demais.

objeto.addParameter([STRING:Seletor Elemento],[STRING:parametro de teste],[STRING:Mensagem de erro]);
O método addParameter define quem receberá o teste, o teste a ser realizado e a mensagem de erro caso o teste falhe (FALSE).
Seletor Elemento: Deve ser passado uma string no forma comum ao JQuery.
No exemplo está .email1, ou seja o teste será aplicado a todos os elementos que tenham a classe email1 (veremos mais sobre seletores adiante)

Parametro de teste: Deve ser uma string em um formato pré-definido que listarei mais abaixo.

Mensagem de erro: Deve ser uma string com a mensagem a ser retornada. Se você optar por incluir elementos HTML nas msgs eles serão interpretados como tal. (exemplo: <BR> quebrará linha no seu retorno de erro a não ser que seja um alerta)
objeto.send([STRING:Seletor Elemento]||[STRING:alert],[STRING:OPCIONAL:função de retorno]);
O método send dispara a execução, enfim, do validador.
Como parametro passe no primeiro argumento a string alert caso queira que os erros sejam retornados em um alert OU uma string contendo o seletor do elemento.
O segundo parametro é opcional, trata-se de uma função que será executada após o validador testar tudo e retornar o erro. Tratarei disso mais afrente no subtitulo função de retorno.

Seletores:
Pra quem não está muito acostumado com seletores, o jQuery dispõe isso de forma bem fácil pois usa a mesma notação do CSS:
#nome : irá buscar por elementos com aquele ID
.nome : irá buscar por elementos com aquela CLASSE
nome : irá buscar por elementos com aquela TAG
PS: para seletores mais complexos leia o artigo no site da documentação do JQuery

Parâmetro de Teste:
Os parâmetros de teste ainda não estão concluídos e ainda devem sofrer alterações. Além da inclusão de muitos outros.
Segue a lista e suas variações.
Validar E-Mail:
As duas formas são isEmail[single] e isEmail[multiple]
A diferença entre elas é que a primeira irá testar se há apenas um email no campo informado. Para se testar mais de um email deve se usar a segunda forma (isEmail[multiple])
PS: Multiplos emais serão validados se separados por "," ou ";".

Validar Quantidade de Caracteres:
O parâmetro de teste para validar qtde de caracteres é o charCount[]
Porém nao é possivel usa-lo assim pois deve se informar a quantidade desejada. Logo segue um exemplo dos subparametros:
charCount[5+] : Verifica se a quantidade de caracteres é maior ou igual a 5
charCount[5..15] : Verifica se a quantidade de caracteres está entre 5 e 15 (incluindo 5 e 15)
charCount[2-] : Verifica se a quantidade de caracteres é menor ou igual a 2
charCount[1] : Verifica se a quantidade de caracteres é exatamente igual a 1
PS: para validar se o campo está vazio é só utilizar charCount[1+]

Validar se Numérico:
O parâmetro de teste para validar se é numerico é o isNumber[]
Opcionalmente você poderá passar subparametros para o isNumber[].
Segue exemplos:
isNumber[5+] : Verifica se o número é maior ou igual a 5
isNumber[5..15] : Verifica se o número está entre 5 e 15 (incluindo 5 e 15)
isNumber[2-] : Verifica se o número é menor ou igual a 2
isNumber[1] : Verifica se o número é exatamente igual a 1

Validar se Alfa:
O parâmetro de teste para validar se é numerico é o isAlpha[].
Opcionalmente você poderá passar subparametros para o isAlpha[]. Eles funcionarão exatamente como o charCount[], porém não precisará incluir uma parametro a mais.
Segue exemplos:
isAlpha[] : Verifica se é alpha (de a-z, de A-Z , de À-ü)
isAlpha[5+] : Verifica se é alpha e se a quantidade de caracteres é maior ou igual a 5
isAlpha[5..15] : Verifica se é alpha e se a quantidade de caracteres está entre 5 e 15 (incluindo 5 e 15)
isAlpha[2-] : Verifica se é alpha e se a quantidade de caracteres é menor ou igual a 2
isAlpha[1] : Verifica se é alpha e se a quantidade de caracteres é exatamente igual a 1
PS: isAlpha[5+] é equivalente a isAlpha[] e charCount[5+] (em dois parametros diferentes e se referindo ao mesmo elemento).

Alguns exemplos de uso:
Código javascript
				
$(function(){
var testform = new JQForm();
testform.setErrorMsg("Alguns Erros foram encontrados:\n\n");

testform.addParameter(".email1","isEmail[single]","E-mail inválido"); // Valida e-mail se [single] valida somente um e-mail, se [multiple] valida varios separados por "," ou ";"

var sendFunc = function efeitoDiv(){
$("#errorTest").css("background-color","#FF0000");
$("input").css("border-color","#FF0000");
}
$("#teste").submit(function(){
return testform.send("#errorTest",sendFunc);
});


});

Funcionamento:
  1. Primeiro instancio um novo JQForm na var testeform.
  2. Então adiciono uma mensagem de erro (para o cabeçalho) com o setErrorMsg.
  3. Então adiciono um novo parâmetro de teste para todos os elementos com a classe email1, testarei se contém um unico email válido, caso não retornarei a msg "E-mail inválido"
  4. Crio uma função que causará algum efeito gráfico em uma div e a instancio na variavel sendFunc
  5. Busco meu form de ID teste e ao seu evento submit retorno o resultado do metodo send (que será true[Válido] ou false[Inválido])
  6. No metodo send passei como primeiro parâmetro o id de uma div que receberá os erros de retorno (se houverem).
  7. Ainda no send passei a função que será executada caso dê algum erro.
É isso!
"Dúvidas, Criticas e Sugerimentos" por favor.

Você gostou? Comente no fórum!

Comentários:

dragun disse:

Venho aqui declarar que o zé tem total permissão pra copiar o barato e ponto final...


Show de bola!

PXzin disse:

aeeeeeeee \o/
O Cara falou tá falado!

Micox disse:

CAra gostei.
Muito prático e fácil de ser usado. Gostei mesmo.

PXzin disse:

Mais 4 validações disponiveis:

isAlphaNumber[]:
Exatamente igual o isAlpha porém valida numeros também

isEqual[]:
Deve se passar como parametro a identificação de um outro elemento. A validação checará se o conteudo de ambos é igual, ideal para campos Password.
OBS: Passar apenas idenficação de um elemento unico, se passar algum que pode ser multiplo (tipo uma classe) ele pode se perder.

ereg[]:
Passar uma expressão regular como parametro. Simples, rápido e indolor!

isChecked[]:
Verifica se um check box está checkado.

Exemplos:
CODE
testform.addParameter("#alphanum","isAlphaNumber[1+]","Number: Somente caracteres alfa-numéricos.");

testform.addParameter("#ereg1","ereg[^[a-z]*$]","EREG: Somente letras de 'a' a 'z' .");

testform.addParameter("#password","isEqual[#password_confirmation]","Igual: Os campos devem ter o mesmo valor.");

testform.addParameter("#checar","isChecked[]","Check: Necessário Checkar.");

Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).

Mais recentes em JavaScript e Ajax

Background randomico
Por JoneMulti - As vezes voce e pergunta "como é que aquele site...
Abandone o getelementbyid
Por Micox - “wtf mico? are you crazy?” - calma malucada, não estou...
Funções javascript equivalentes a funções
Por Micox - Php to javascript project: php.js...
Select dinâmico de estados e cidades
Por DGmike - Uma das dúvidas mais comuns para quem está começando...
Selecionar dinâmicamente um option de um select
Por Manito - Dica para quem fizer um form usando ajax...

Ver mais Artigos de JavaScript e Ajax.

Ver e retirar outras dúvidas no fórum Webly.

Alguns Direitos Reservados | RSS | O Fórum

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com