+2
Validando formulários com o Tigra
Antes de editar a página com o formulário, vou explicar de forma simples o funcionamento do Tigra.
O validador do Tigra é um construtor que vai pegar as variáveis e configurações de validação e retorna com as mensagens de erro ou não. Traduzindo... para utilizar o Tigra teremos que enviar essas configurações para o validator.js, mas isto é simples...
O primeiro a se fazer no seu arquivo é declarar a utilização do arquivo validator.js na página... Dentro do bloco <head></head> adicione a seguinte linha:
Após isto teremos que montar o formulário... abaixo está o código do formulário de exemplo que estou montando:
Atenção a parte de configuração do formulário... não esqueça de colocar isto, senão num funciona... :
O validador de formulários aceita forms tanto do tipo GET quanto POST... então vai na fé!!!!
Notem que em label coloquei um id com valores... isso funcionará para ser destacado a área caso ocorra algum erro.
Após a declaração do validator.js e da montagem do formulário vamos a parte mais interessante/complicada, que é a configuração das variáveis e da validaçãoe chamada do construtor...
O validador do Tigra é um construtor que vai pegar as variáveis e configurações de validação e retorna com as mensagens de erro ou não. Traduzindo... para utilizar o Tigra teremos que enviar essas configurações para o validator.js, mas isto é simples...
O primeiro a se fazer no seu arquivo é declarar a utilização do arquivo validator.js na página... Dentro do bloco <head></head> adicione a seguinte linha:
<script language="javascript" src="./validator.js" type="text/javascript"></script>
Após isto teremos que montar o formulário... abaixo está o código do formulário de exemplo que estou montando:
<form id="formulario1" name="formulario1" method="post" action="cadastro2.php" onsubmit="return v.exec()">
<label id="nome">Primeiro Nome*
<input type="text" name="nome" />
</label>
<br />
<label>Endereço
<input type="text" name="endereço" />
</label>
<br />
<label id ="mail">E-mail*
<input type="text" name="email" />
</label>
<p>
<label>
<input type="submit" name="Submit" value="Enviar" />
</label>
</p>
</form>
Atenção a parte de configuração do formulário... não esqueça de colocar isto, senão num funciona... :
onsubmit="return v.exec()"
O validador de formulários aceita forms tanto do tipo GET quanto POST... então vai na fé!!!!
Notem que em label coloquei um id com valores... isso funcionará para ser destacado a área caso ocorra algum erro.
Após a declaração do validator.js e da montagem do formulário vamos a parte mais interessante/complicada, que é a configuração das variáveis e da validaçãoe chamada do construtor...
Estou aprendendo PHP e fiquei com duvidas como coloco isto em meu programa tenho dois programas um onde uso o echo para montar o meu formulário é a onde (edito, altero, listo e excluo) e outro onde tenho o meu cabeçalho e rodapé.
Onde coloco as linhas:
<script language='javascript' src='./validator.js' type='text/javascript'></script>
onsubmit="return v.exec()"
</body>
<script language="javascript" type="text/javascript">
var campos= {
'nome':{'l':'Primeiro nome','r':true,'f':'alpha','t':'nome'},
'email':{'l':'E-mail','r':true,'f':'email','t':'mail'}
}
var v = new validator('formulario1',campos);
</script>
</html>
Onde coloco as linhas:
<script language='javascript' src='./validator.js' type='text/javascript'></script>
onsubmit="return v.exec()"
</body>
<script language="javascript" type="text/javascript">
var campos= {
'nome':{'l':'Primeiro nome','r':true,'f':'alpha','t':'nome'},
'email':{'l':'E-mail','r':true,'f':'email','t':'mail'}
}
var v = new validator('formulario1',campos);
</script>
</html>
01/06/2009 12:43pm
(~15 anos atrás)
Galera, segui a ideia dos colegas aqui, e consegui usar a validação perfeitamente,
Agora estou precisando colocar o TIGRA pra validar 2 forumularios na mesma pagina.
Algum colega ja precisou disso.
Grato por qualquer informação,
Rodrigo
Agora estou precisando colocar o TIGRA pra validar 2 forumularios na mesma pagina.
Algum colega ja precisou disso.
Grato por qualquer informação,
Rodrigo
17/06/2007 1:08pm
(~17 anos atrás)
Pessoal, descupem a falta de atenção, pois o exemplo cita já é bem didatico.
Tenho ainda algumas dúvidas quanto a perda das máscaras de entrada quando adapto ao tigra, por exemplo de data.
...
<input name="base_precos" type="text" align="right" id="base_precos" size="20" maxlenght=20 value="" onKeyDown="javascript:return dFilter (event.keyCode, this, '##/##/####');" style="font-family:verdana;font-size:10pt;width:110px;">
...
Podem me auxiliar, por favor?
Obrigado.
Tenho ainda algumas dúvidas quanto a perda das máscaras de entrada quando adapto ao tigra, por exemplo de data.
...
<input name="base_precos" type="text" align="right" id="base_precos" size="20" maxlenght=20 value="" onKeyDown="javascript:return dFilter (event.keyCode, this, '##/##/####');" style="font-family:verdana;font-size:10pt;width:110px;">
...
Podem me auxiliar, por favor?
Obrigado.
07/07/2006 5:03am
(~18 anos atrás)
Caros colegas,
Poderiam exemplificar de forma mais didática, com uma página php completa de como validar com máscaras 3 campos diferentes de data, nome e valor?
Obrigado.
Poderiam exemplificar de forma mais didática, com uma página php completa de como validar com máscaras 3 campos diferentes de data, nome e valor?
Obrigado.
03/07/2006 12:19pm
(~18 anos atrás)
Estou usando uma combo com o campo alfa, mais preciso a liberação de acentos e espaços, como faço?
30/03/2006 8:56am
(~18 anos atrás)
Muito bom esse artigo, porem, não consegui validar o script pelo método GET? Há algum segredo?
01/03/2006 4:35am
(~19 anos atrás)
// substitua a variável por isto aqui
var re_dt = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/
// substitua a data por isto aqui
'date' : function (s_date) {
// check format
if (!re_dt.test(s_date)){
return false;
}
// check allowed ranges
if (RegExp.$1 > 31 || RegExp.$2 > 12){
return false;
}
// check number of day in month
var dt_test = new Date(RegExp.$3, Number(RegExp.$2-1), RegExp.$1);
if (dt_test.getMonth() != Number(RegExp.$2-1))
return false;
return true;
},
var re_dt = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/
// substitua a data por isto aqui
'date' : function (s_date) {
// check format
if (!re_dt.test(s_date)){
return false;
}
// check allowed ranges
if (RegExp.$1 > 31 || RegExp.$2 > 12){
return false;
}
// check number of day in month
var dt_test = new Date(RegExp.$3, Number(RegExp.$2-1), RegExp.$1);
if (dt_test.getMonth() != Number(RegExp.$2-1))
return false;
return true;
},
15/02/2006 2:52am
(~19 anos atrás)
Gente....perdão a minha ignorância, mas não entendi algumas coisas...
Qual é o tipo do campo para texto , por exemplo nome (com espaços e acentos)?
E outra coisa...tem como alguém explicar melhor a sintaxe do código....
var campos= {
'nome':{'l':'Nome','r':true,'f':'alpha','t':'nomes'},
'email':{'l':'E-mail','r':true,'f':'email','t':'mail'}
}
Thanks!
Qual é o tipo do campo para texto , por exemplo nome (com espaços e acentos)?
E outra coisa...tem como alguém explicar melhor a sintaxe do código....
var campos= {
'nome':{'l':'Nome','r':true,'f':'alpha','t':'nomes'},
'email':{'l':'E-mail','r':true,'f':'email','t':'mail'}
}
Thanks!
24/01/2006 7:59am
(~19 anos atrás)
Alguém já pensou em criar validação de tag html, neste sisteminha bacana de validação?....
Tenho um bom editor de conteúdo em javascript para campos de Texto parecido com Word, onde o usuário faz uso de tags html pra postar os textos só que as tags vão embutidas no código e o usuário não as vê, estou tentando incrementar mais essa funcionalidade a validação...por enquanto não funfou.
Abraço
Tenho um bom editor de conteúdo em javascript para campos de Texto parecido com Word, onde o usuário faz uso de tags html pra postar os textos só que as tags vão embutidas no código e o usuário não as vê, estou tentando incrementar mais essa funcionalidade a validação...por enquanto não funfou.
Abraço
18/01/2006 3:21pm
(~19 anos atrás)
Muito bom este artigo.
Parabens ao autor pela capacidade de sintese e o metodo pedagogico usado p explicar.
Tudo muito claro. Segui o tutorial e obtive 100% de resultado positivo.
Parabens!