Tigra Form Validator

[Apokalypse 0]

Olá a todos,

 

Pesquisei em todo o fórum e notei que eu fui o único que comentou algo sobre o Tigra Form Validator, então gostaria de apresenta-lo para quem ainda não conhece.

 

O Tigra Form Validator é um script de validação de formulários bem completo e de fácil uso/aplicação.

 

Algumas funcionalidades do script:

- Opção de múltiplos formulários por página;

- Validação através de padrões específicos (personalizavel): alfabético, alfa-numérico, numeros inteiros, números decimais, email, telefone, data e hora

- Relacionamento entre campos (Senha e confirmar senha por exemplo)

- Configuração de mínimo/máximo de caracteres para preenchimento do campo;

- Após validar, destaca os campos que deram erro com focus automático;

- Suporta os principais navegadores web (consulte a tabela de compatibilidade http://www.softcomplex.com/products/tigra_...atibility_list)

- Facil aplicação;

- É de grátis...heeh

 

 

Então, vamos ao que interessa: baixe o Tigra Form Validator aqui: http://www.softcomplex.com/products/tigra_form_validator/. Existem duas versões do script (Form Validator e Form Validator Pro). Não vou comentar sobre o Pró porque é uma versão paga e eu não tive a oportunidade de ver em funcionamento.

 

Dentro do pacote vamos utilizar apenas o arquivo validator.js, os demais são apenas exemplos de aplicação do script.

 

Primeiro passo é editar o arquivo validator.js e modificar as mensages de erro, que de padrão estão em inglês.

 

Localize:

a_messages = [	'No form name passed to validator construction routine',	'No array of "%form%" form fields passed to validator construction routine',	'Form "%form%" can not be found in this document',	'Incomplete "%n%" form field descriptor entry. "l" attribute is missing',	'Can not find form field "%n%" in the form "%form%"',	'Can not find label tag (id="%t%")',	'Can not verify match. Field "%m%" was not found',	'"%l%" is a required field',	'Value for "%l%" must be %mn% characters or more',	'Value for "%l%" must be no longer than %mx% characters',	'"%v%" is not valid value for "%l%"',	'"%l%" must match "%ml%"']

E substitua por uma versão traduzida (tradução by Fred Hakamine)

a_messages = [	'Nenhum nome do formulário passou à rotina do Validator',	'Nenhum array do campo "%form%" passou à rotina do Validator',	'O formulário "%form%" não pode ser encontrado no documento',	'Entrada imcompleta no campo de formulário "%n%". Atributo "l" não encontrado',	'Não encontrado o campo "%n%" no formulário "%form%"',	'Não encontrada a label tag (id="%t%")',	'Não é possível validar. Campo "%m%" não encontrado',	'"%l%" é um campo obrigatório',	'"%l%" precisa no mínimo %mn% caracteres ou mais',	'"%l%" não pode ter mais que %mx% caracteres',	'"%v%" não é um valor válido para "%l%"',	'"%l%" deve ser "%ml%"']

Salve e vamos a aplicação.

 

Carrege o arquivo validator.js no seu html

<script language="JavaScript" src="validator.js"></script>

Nosso formulário

<form action="" method="get" name="login" onsubmit="return v.exec()">  <label for nome: id="l_nome">Nome: </label>  <input type="text" name="nome" id="nome" />  <br>	<label for nome: id="l_sobrenome">Sobrenome: </label>  <input type="text" name="sobrenome" id="sobrenome" />  <br>  <label id="l_email">Email: </label>  <input type="text" name="email" id="email" />  <br>  <label id="l_senha">Senha:</label>  <input type="password" name="senha" id="senha" />  <br>  <label id="l_confirma_senha">Confirma Senha:</label>  <input type="password" name="confirma_senha" id="confirma_senha" />  <br>  <input type="submit" name="Submit" value="Enviar" /></form>

ATENÇÃO: se você não colocar o onsubmit dentro da tag form, ele não executa a validação!!!!

 

Código que configura a validação. Eu sempre coloco ele logo embaixo da tag </form> pra ficar mais prático na hora de editar.

<script language="javascript">// Campos que serão validadosvar campos = {	'nome' : {		'l': 'Nome',	 // nome do campo para aparecer na mensagem de erro		'r': false,	  // se o campo tem preenchimento obrigatorio ou não		'f': 'alpha',	  // formato do campo		't': 'l_nome',   // id do elemento que será 'destacado' caso ocorra erro com este campo		'm': null,	   // campo para comparar		'mn': 2,		 // comprimento minimo		'mx': null	   // comprimento maximo	},	'sobrenome' : {'l':'Sobrenome','r':false,'mn': 2, 't':'l_sobrenome'},	'email' : {'l':'E-mail','r':true,'f':'email','t':'l_email'},	'senha' : {'l':'Password','r':true,'f':'alphanum','t':'l_senha','m':'confirma_senha'},	'confirma_senha' : {'l':'Password copy','r':true,'f':'alphanum','t':'l_confirma_senha'}}// Construtor da classe validator(ID_DO_FORM,array_com_config_campos);var v = new validator('login', campos);// para validar outro form na mesma página é só criar outra array com os parametros do outro formulário e recarregar a classe validator.// ex: var v2 = new validator('login2',campos2);</script>

Descrição da sintaxe para declarar um campo na validação:

'nome_do_campo':{'l':'Nome do campo para erros','r':true,'f':'tipo do campo','t':'onde vai apontar em caso de erro'},

 

r: indica se o campo é obrigatório ou não (true ou false)

f: possui os tipos de campo:

- alpha = letras, pontos e hífens

- alphanum = letras, números e underline (_)

- unsigned = um número positivo

- integer = um número inteiro

- real = um número com ponto decimal

- email = formato de e-mail

- phone = Número de telefone com digitos, espaços, pontos e hífens

- date = data no formtado DD-MM-YYYY

- time = tempo no formato HH:MM:SS

 

 

Caso você queira que os campos sejam destacados ao encontrar erro, é só adicionar o CSS:

<style type="text/css"> // cor do campo com erro.tfvHighlight{color: #CEA639;}// cor do campo normal.tfvNormal{color: black;}</style>

No meu caso, eu personalizei o script para adaptar a minha classe PHP de geração de formulários, mas utilizando ela 'crua' assim já ajuda muito!!

Dica: Se você utiliza um form em tabelas sem <label> e quer destacar o campo quando der erro, basta colocar no <td> onde está o nome do campo o parametro id para o script localiza-lo e aplicar o CSS.

Exemplo:

<tr><td>nome</td><td id="l_nome"><input type="text" name="nome" id="nome" /></td></tr>

No site da SoftComplex (http://www.softcomplex.com) tem vários outros scripts gratis que são interessantes e merecem uma olhadinha.

 

 

É isso..espero que tenham gostado.

 

Se você utiliza o Tigra e fez alterações interessantes no código, posta ai!

 

Abraço a todos!

[Apokalypse 0]

Pessoal, dei uma implementada no Tigra pra fazer validação de CPF/CNPJ.

 

Baixe o script modificado com exemplo: http://www.mmsweb.com.br/downloads/tigra_validacao_cpf.rar

 

Eu deixei dentro de comentários '////modifiquei aqui/////////////////' as alterações que eu fiz no validator.js para vocês entenderem o que foi feito. Também utilizei uma biblioteca de CPF/CNPJ criada pelo Márcio d'Avilla.

 

Observação imporante: como a validação do JS está em um arquivo separado, no documento HTML você deve carregar primeiramente o Javascript do cpf_cnpj.js, e após o validator.js senão não irá funcionar.

 

Qualquer dúvidas, é so mandar uma mensagem privada.

 

Abraços!

[hardnet 0]

Olá a todos,

 

Pesquisei em todo o fórum e notei que eu fui o único que comentou algo sobre o Tigra Form Validator, então gostaria de apresenta-lo para quem ainda não conhece.

 

O Tigra Form Validator é um script de validação de formulários bem completo e de fácil uso/aplicação.

 

Algumas funcionalidades do script:

- Opção de múltiplos formulários por página;

- Validação através de padrões específicos (personalizavel): alfabético, alfa-numérico, numeros inteiros, números decimais, email, telefone, data e hora

- Relacionamento entre campos (Senha e confirmar senha por exemplo)

- Configuração de mínimo/máximo de caracteres para preenchimento do campo;

- Após validar, destaca os campos que deram erro com focus automático;

- Suporta os principais navegadores web (consulte a tabela de compatibilidade http://www.softcomplex.com/products/tigra_...atibility_list)

- Facil aplicação;

- É de grátis...heeh

 

 

Então, vamos ao que interessa: baixe o Tigra Form Validator aqui: http://www.softcomplex.com/products/tigra_form_validator/. Existem duas versões do script (Form Validator e Form Validator Pro). Não vou comentar sobre o Pró porque é uma versão paga e eu não tive a oportunidade de ver em funcionamento.

 

Dentro do pacote vamos utilizar apenas o arquivo validator.js, os demais são apenas exemplos de aplicação do script.

 

Primeiro passo é editar o arquivo validator.js e modificar as mensages de erro, que de padrão estão em inglês.

 

Localize:

a_messages = [	'No form name passed to validator construction routine',	'No array of "%form%" form fields passed to validator construction routine',	'Form "%form%" can not be found in this document',	'Incomplete "%n%" form field descriptor entry. "l" attribute is missing',	'Can not find form field "%n%" in the form "%form%"',	'Can not find label tag (id="%t%")',	'Can not verify match. Field "%m%" was not found',	'"%l%" is a required field',	'Value for "%l%" must be %mn% characters or more',	'Value for "%l%" must be no longer than %mx% characters',	'"%v%" is not valid value for "%l%"',	'"%l%" must match "%ml%"']

E substitua por uma versão traduzida (tradução by Fred Hakamine)

a_messages = [	'Nenhum nome do formulário passou à rotina do Validator',	'Nenhum array do campo "%form%" passou à rotina do Validator',	'O formulário "%form%" não pode ser encontrado no documento',	'Entrada imcompleta no campo de formulário "%n%". Atributo "l" não encontrado',	'Não encontrado o campo "%n%" no formulário "%form%"',	'Não encontrada a label tag (id="%t%")',	'Não é possível validar. Campo "%m%" não encontrado',	'"%l%" é um campo obrigatório',	'"%l%" precisa no mínimo %mn% caracteres ou mais',	'"%l%" não pode ter mais que %mx% caracteres',	'"%v%" não é um valor válido para "%l%"',	'"%l%" deve ser "%ml%"']

Salve e vamos a aplicação.

 

Carrege o arquivo validator.js no seu html

<script language="JavaScript" src="validator.js"></script>

Nosso formulário

<form action="" method="get" name="login" onsubmit="return v.exec()">  <label for nome: id="l_nome">Nome: </label>  <input type="text" name="nome" id="nome" />  <br>	<label for nome: id="l_sobrenome">Sobrenome: </label>  <input type="text" name="sobrenome" id="sobrenome" />  <br>  <label id="l_email">Email: </label>  <input type="text" name="email" id="email" />  <br>  <label id="l_senha">Senha:</label>  <input type="password" name="senha" id="senha" />  <br>  <label id="l_confirma_senha">Confirma Senha:</label>  <input type="password" name="confirma_senha" id="confirma_senha" />  <br>  <input type="submit" name="Submit" value="Enviar" /></form>

ATENÇÃO: se você não colocar o onsubmit dentro da tag form, ele não executa a validação!!!!

 

Código que configura a validação. Eu sempre coloco ele logo embaixo da tag </form> pra ficar mais prático na hora de editar.

<script language="javascript">// Campos que serão validadosvar campos = {	'nome' : {		'l': 'Nome',	 // nome do campo para aparecer na mensagem de erro		'r': false,	  // se o campo tem preenchimento obrigatorio ou não		'f': 'alpha',	  // formato do campo		't': 'l_nome',   // id do elemento que será 'destacado' caso ocorra erro com este campo		'm': null,	   // campo para comparar		'mn': 2,		 // comprimento minimo		'mx': null	   // comprimento maximo	},	'sobrenome' : {'l':'Sobrenome','r':false,'mn': 2, 't':'l_sobrenome'},	'email' : {'l':'E-mail','r':true,'f':'email','t':'l_email'},	'senha' : {'l':'Password','r':true,'f':'alphanum','t':'l_senha','m':'confirma_senha'},	'confirma_senha' : {'l':'Password copy','r':true,'f':'alphanum','t':'l_confirma_senha'}}// Construtor da classe validator(ID_DO_FORM,array_com_config_campos);var v = new validator('login', campos);// para validar outro form na mesma página é só criar outra array com os parametros do outro formulário e recarregar a classe validator.// ex: var v2 = new validator('login2',campos2);</script>

Descrição da sintaxe para declarar um campo na validação:

'nome_do_campo':{'l':'Nome do campo para erros','r':true,'f':'tipo do campo','t':'onde vai apontar em caso de erro'},

 

r: indica se o campo é obrigatório ou não (true ou false)

f: possui os tipos de campo:

- alpha = letras, pontos e hífens

- alphanum = letras, números e underline (_)

- unsigned = um número positivo

- integer = um número inteiro

- real = um número com ponto decimal

- email = formato de e-mail

- phone = Número de telefone com digitos, espaços, pontos e hífens

- date = data no formtado DD-MM-YYYY

- time = tempo no formato HH:MM:SS

 

 

Caso você queira que os campos sejam destacados ao encontrar erro, é só adicionar o CSS:

<style type="text/css"> // cor do campo com erro.tfvHighlight{color: #CEA639;}// cor do campo normal.tfvNormal{color: black;}</style>

No meu caso, eu personalizei o script para adaptar a minha classe PHP de geração de formulários, mas utilizando ela 'crua' assim já ajuda muito!!

Dica: Se você utiliza um form em tabelas sem <label> e quer destacar o campo quando der erro, basta colocar no <td> onde está o nome do campo o parametro id para o script localiza-lo e aplicar o CSS.

Exemplo:

<tr><td>nome</td><td id="l_nome"><input type="text" name="nome" id="nome" /></td></tr>

No site da SoftComplex (http://www.softcomplex.com) tem vários outros scripts gratis que são interessantes e merecem uma olhadinha.

 

 

É isso..espero que tenham gostado.

 

Se você utiliza o Tigra e fez alterações interessantes no código, posta ai!

 

Abraço a todos!

E como isto iria pra um e-mail, caso fosse um formulário de contato???

[Spyker 0]

PARABENS PELO SEU TRABALHO MAS NAO CONSIGO FAZER O DOWNLOAD DO SEU SCRIPT...VE SE O LINK NAO ESTA COM PROBLEMA, FLWS!!!

[Apokalypse 0]

Primeiramente desculpem pela demora pra resposta, andei meio 'desaparecido'.

 

PARABENS PELO SEU TRABALHO MAS NAO CONSIGO FAZER O DOWNLOAD DO SEU SCRIPT...

VE SE O LINK NAO ESTA COM PROBLEMA, FLWS!!!

Rapaz, o link ta funcionando...testa lá!!

 

abçs!

 

E como isto iria pra um e-mail, caso fosse um formulário de contato???

então, o script apenas valida o form, o envio dele nao muda em nada.

abçs!

[Mariel 0]

ufa!me salvou... tava ficando de saco cheio de editar isso e não entender quase nada!deu uma luz!grazzie!

[Marcelo Macêdo 0]

Muito Bom esse treco, ESSE TAL DE TIGRA !!!Só tem um detalhe: Não funcionaou comigo o id_nomedocampo no TD, para isso tive que colocar no inicio do formulário as seguintes declarações de LABELS, sem "usár" realemte a label...du pra entender ???<body topmargin="0" ><form action="http://www.itau.com.br" method="get" name="login" onsubmit="return v.exec()"> <label for areacargo: id="l_areacargo"></label> <label for nome: id="l_nome"></label> <label for email: id="l_email"></label> ............Notem que "Aparentemente não coloco nada entre as TAGs", pois quero manter o TD.Eu Uso o Internet Explorer 7.0, Firefox2.0, Netscape 8.2 e Opera 9.20 Beta, FUNCIONOU EM TODOS.Marcelo Macêdo !!!

[Fabyo 66]

Hoje existe maineiras muito mais elegantes e funcionais com javascript não obstrusivo

 

http://jquery.bassistance.de/validate/demo-test/

 

http://leandro.w3invent.com.br/addons/w3FormValidation/

[etapombas 0]

Noossaaaa... muito show de bola esse Tigra.Pena que a versão deles é de 2005mas adoreiFabyo o que seria javascript obstrusivo?

[Fabyo 66]

nao uso mais esse esquema uso agora jquery é muito mais fantastico e perfeito

 

e sobre a outra pergunta é usar o javascript sem mecher no codigo fonte por exemplo <input type="text" name="campo" onclick="teste();" />

com javascript nao obstrusivo nao se escreve onclick="teste();", ou outro evento nos campos ou objetos da pagina

[etapombas 0]

hummmmmmmmmmmmm interessante esse lance de obstrusivo...polpa tempo mto tempobom se puder indicar o jquey q esta usando ficarei feliz!

[Fabyo 66]

http://forum.imasters.com.br/index.php?showtopic=223155

[Apokalypse 0]

http://forum.imasters.com.br/index.php?showtopic=223155

Olá Fabyo, beleza?Eu também to migrando pro jquery, mas acho que por um tempo ainda vou usar o tigra mesmo, por causa da compatibilidade. Não consegui fazer funcionar corretamente jquery em FF <= 1.5 e ie <= 5.5abçs!

[Fabyo 66]

funciona sim funciona em qualquer navegador, e é muito melhor

 

qualquer duvida só postar ai que eu te ajudo arrumar seu script