+2

Validando formulários com o Tigra

criado por Fred Hakamine em 14/10/2005 7:13pm
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:

<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...

Comentários:

Mostrando 1 - 10 de 58 comentários
Bom Dia para todos!
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!
11/05/2010 4:19am (~10 anos atrás)

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>
01/06/2009 12:43pm (~11 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
17/06/2007 1:08pm (~13 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.
07/07/2006 5:03am (~14 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.
03/07/2006 12:19pm (~14 anos atrás)

cobrinha disse:
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 (~14 anos atrás)

Marcio disse:
Muito bom esse artigo, porem, não consegui validar o script pelo método GET? Há algum segredo?
01/03/2006 4:35am (~14 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;
},
15/02/2006 2:52am (~15 anos atrás)

Luciano Tadeu disse:
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!
24/01/2006 7:59am (~15 anos atrás)

Alexandre disse:
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
18/01/2006 3:21pm (~15 anos atrás)

Novo Comentário:

(Você pode usar tags como <b>, <i> ou <code>. URLs serão convertidas para links automaticamente.)