[PXzin]

Fala Galera!!
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

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:

• Primeiro instancio um novo JQForm na var testeform.
  
• Então adiciono uma mensagem de erro (para o cabeçalho) com o setErrorMsg.
  
• 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"
  
• Crio uma função que causará algum efeito gráfico em uma div e a instancio na variavel sendFunc
  
• 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])
  
• No metodo send passei como primeiro parâmetro o id de uma div que receberá os erros de retorno (se houverem).
  
• Ainda no send passei a função que será executada caso dê algum erro.

É isso!
"Dúvidas, Criticas e Sugerimentos" por favor.

[dragun]

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


Show de bola!

[PXzin]

aeeeeeeee \o/
O Cara falou tá falado!

[Micox]

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

[PXzin]

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:

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.");