[Resolvido] Validação de formulári - páginas diferentes de acordo

[Meela 0]

Oi gente!

Preciso fazer um formulário de apenas um campo, para inserir um determinado valor.

Esse valor tem que ser entre 2 e 2.000. Para cada caso (valor correto, maior, menor ou não preenchido) deve existir a ação de, ao enviaro formulário, ir para uma página diferente.

O submit desse formulário é um botão com uma imagem.

 

Fiz esse código, mas ele não funciona, não acontece nada. Cheguei à conclusão de que é porque não determinei nenhuma "action" dentro do campo "form", mas qualquer action que eu coloque não chama pro javascript..

 

Alguma sugestão?

 

Obrigada!

 

HTML do formulário:

<div id="campo_saque">
<form method="get" name="saque_form" onsubmit="return Verifica();">
  <input name="saque" type="text" class="saque_form" size="30"  maxlength="6"/>
<!--<a href="javascript: Verifica(saque)"><div id="continua"></div></a> -->
<input name="continuar" type="image" class="continua_saque" src="continuar.png"/>

</form>
</div>

Javascript:

<script Language="JavaScript">
function Verifica(saque)
{
var saque;
saque=document.saque_form.saque.value;

if(saque_form.saque.value < 2 || !IsNum(saque_form.saque.value))
	{
	window.open('DV17.html', 'Saque menor que o permitido',_self);
	document.saque_form.saque.focus();
	return false;
	}
if(saque_form.saque.value > 200.000 || !IsNum(saque_form.saque.value))
	{
	window.open('DV18.html', 'Saque maior que o permitido',_self);
	document.saque_form.saque.focus();
	return false;
	}
if(saque_form.saque.value > 2 || saque_form.saque.value < 200.000 || !IsNum(saque_form.saque.value))
	{
	window.open('DV01.html', 'Saque Rápido',_self);
	document.saque_form.saque.focus();
	return false;
	}
if(saque_form.saque.value == "" || !IsNum(saque_form.saque.value))
	{
	window.open('DV20.html', 'Saque Rápido',_self);
	document.saque_form.saque.focus();
	return false;
	}
	
}
</Script>

[Henrique Barcelos 290]

Vamos por partes, primeiramente, dê um ID para o campo de texto e para o form, para acessar corretamente via DOM, separando o HTML do JS:

<form method="get" name="saque_form" id="saque_form">
<input name="saque" type="text" class="saque_form" size="30" maxlength="6"/>
<!--<a href="javascript: Verifica(saque)"><div id="continua"></div></a> -->
<input name="continuar" type="image" class="continua_saque" src="continuar.png"/>

 

 

Informe o atributo type para a tag script, ele é obrigatório, ao contrário do atributo language.

 

<script type="text/javascript">
window.onload = function(){
document.getElementyById('saque_form').onsubmit = function(e){
e = e || window.event;
var valor = this.getElementById('saque').value;
if(!Verifica(valor)){
e.preventDefault(); //impede o envio do form
} 
}
}

function Verifica(saque)
{
if(saque_form.saque.value < 2 || !IsNum(saque_form.saque.value))
{
window.open('DV17.html', 'Saque menor que o permitido',_self);
document.saque_form.saque.focus();
return false;
}
if(saque_form.saque.value > 200.000 || !IsNum(saque_form.saque.value))
{
window.open('DV18.html', 'Saque maior que o permitido',_self);
document.saque_form.saque.focus();
return false;
}
if(saque_form.saque.value > 2 || saque_form.saque.value < 200.000 || !IsNum(saque_form.saque.value))
{
window.open('DV01.html', 'Saque Rápido',_self);
document.saque_form.saque.focus();
return false;
}
if(saque_form.saque.value == "" || !IsNum(saque_form.saque.value))
{
window.open('DV20.html', 'Saque Rápido',_self);
document.saque_form.saque.focus();
return false;
}

}
</script>

Pelo que eu entendi, você quer abrir uma poup-up, certo?

Se não é, porque não altera o atributo href:

window.location.href = 'DV20.html';
//ao invés de
window.open('DV20.html', 'Saque Rápido',_self);

[Meela 0]

Oi Henrique!

Obrigada pela disposição, mas infelizmente não funcionou...

Continua não acontecendo nada.

Fazendo um teste, ao retirar o window.onload, que você sugeriu, e alterando a função de window.location.href ou window.open para um simples alert, funciona. A questão é que eu preciso carregar uma nova página, e não dar um alerta =/

Segue o código completo pra visualização:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digite o valor do saque</title>
<style type="text/css">
body {
background-image:url(../Adaptadas/DV10-alterar-valor-do-saque-rapido.jpg);
background-repeat:no-repeat;
}
#campo_saque {
width: 165px;
height: 55px;
position: absolute;
left: 30px;
top: 218px;
}
.saque_form {
background: #fff;
width: 168px;
height: 51px;
position: absolute;
left: 0px;
top: 3px;
font-size: 24px;
font-family:Arial, Helvetica, sans-serif;
color: #000;
border: none;
}
#encerrar {
position:absolute;
left: 28px;
top: 529px;
width: 139px;
height: 54px;
}
#preencher {
position:absolute;
left: 783px;
top: 580px;
}
#mp{
position:absolute;
left: 28px;
top: 424px;
width: 138px;
height: 47px;
}
#continua{
position:absolute;
left: 601px;
top: 208px;
width: 145px;
height: 49px;
}
.continua_saque{
position:absolute;
left: 602px;
top: 207px;
width: 145px;
height: 49px;
}
</style>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('form').onsubmit = function(e)
	{
	e = e || windows.event;
	var valor = this.getElementById('saque').value;
	if(!Verifica(valor))
		{
		e.preventDefault(); //impede o envio do form
		}
	}
}
function Verifica()
{
var saque;

if(saque_form.saque.value < 2 || !IsNum(saque_form.saque.value))
{
window.location.href = 'DV17.html';
document.saque_form.saque.focus();
return false;
}
if(saque_form.saque.value > 200.000 || !IsNum(saque_form.saque.value))
{
window.location.href = 'DV18.html';
document.saque_form.saque.focus();
return false;
}
if(saque_form.saque.value > 2 || saque_form.saque.value < 200.000 || !IsNum(saque_form.saque.value))
{
window.location.href = 'DV01.html';
document.saque_form.saque.focus();
return false;
}
if(saque_form.saque.value == "" || !IsNum(saque_form.saque.value))
{
window.location.href = 'DV20.html';
document.saque_form.saque.focus();
return false;
}

}
</Script>
</head>

<body>
<div id="campo_saque">
<form method="get" name="saque_form" id="form" onsubmit="javascript: Verifica()">
 <input name="saque" type="text" class="saque_form" size="30"  maxlength="6"/>
<input name="continuar" type="submit" class="continua_saque" />

</form>
</div>
<a href="inicial.html"><div id="mp"></div></a>
<a href="dv12.html"><div id="encerrar"></div></a>


</body>
</html>

[Francis Schiavo 1]

O problema pode ser porque você está tentando usar o onsubmit e retornando false. O onsubmit é um evento que valida se um formulário pode ou não ser enviado (true = envia, false = não envia). Como o location.href está sendo alterado dentro dessa validação ele pode ser inibido.

Tente colocar a sua função Verifica() no onclick do botão (mas vale trocar para input type="button" nesse caso). O formulário não será enviado, ao invés disso ele carregará a página.

Caso você realmente precise enviar o valor dos campos do formulário terá que usar uma forma diferente de atribuir o location.href.

[Meela 0]

Oi Francis.

Alterei todos os retornos para true e coloquei o onclick no botão.

Para a primeira condição funcionou (quando entro com um valor menor que 2, vai para a página certa).

Acontece que quando não entro com valor nenhum (condição 4), vai para a mesma página da condição 1, e nos outros dois casos (valores maiores que 200000 e valores entre 2 e 200000) não acontece nada..

 

Fazendo um teste aqui, percebi que ele só está chamando a primeira condição e ignorando as outras. Se eu apago a primeira condição, a segunda funciona e as outras não, e assim sucessivamente. Como faço pra ele ler todas as condições?

[Francis Schiavo 1]

Tente esse código otimizado:

function Verifica()
{
 document.saque_form.saque.focus();

 // Se não for numérico
 if(!IsNum(saque_form.saque.value)) {
   window.location.href = 'DV20.html';
   return false;
 }

 var valor = parseFloat(saque_form.saque.value);

 // Se for maior que 200
 if (valor > 200)
   window.location.href = 'DV18.html';
 else if (valor > 2)
   window.location.href = 'DV01.html';
 else if (valor < 2)
   window.location.href = 'DV17.html';
 }
 return true;
}

 

Note que no código original que você postou não acontecerá nada para valores iguais a 2 ou 200. Você tem que usar >= ou <= em algumas condições, não incluí pois não sei onde precisaria ser...

[Meela 0]

Francis, com o código otimizado não funcionou nada D=

Como eu disse no post anterior (acho que editei enquanto você escrevia, então não viu), ele interpreta a primeira condição, apenas.

Mudei as outras condições pra else if mas não adiantou também...

 

Pra que serve esse comando parseFloat?

[Francis Schiavo 1]

coloque o document antes do nome do form em "var valor = parseFloat(saque_form.saque.value);"

assim: "var valor = parseFloat(document.saque_form.saque.value);"

 

O parseFloat converte um texto do input em um número com casas decimais.

[Meela 0]

Francis, continua não adiantando. É como se o botão ficasse desabilitado.

[Francis Schiavo 1]

Desculpe a demora na resposta, mas não pude logar aqui antes.

 

Fiz um exemplo mais elaborado sobre esse assunto:

<html>
 <head>
   <title>Teste</title>
   <script type="text/javascript">
     function Valida() {
       var form, input, valor, uri;
       try {
         // Pega o form pela ID
         form = document.getElementById('formSaque');
         // Pega o input pela ID
         input = document.getElementById('inputSaque');
         // Verifica se valor digitado NÂO é um número, se não for estoura uma exceção com o uri da página de erro.
         if (isNaN(input.value))
           throw 'pageError1.html';
         // Se é um número, converte em float para facilitar o cálculo
         valor = parseFloat(input.value);
         if (valor > 200)
           uri = '/page1.html'
         else if (valor > 2)
           uri = '/page2.html'
         else if (valor > 0)
           uri = '/page3.html'
         else
           throw 'pageError2.html'; // Estoura uma exceção caso o número seja negativo
         // Se não ocorreram exceções, muda o action do form para o uri especificado
         form.action = uri;
         // Retorna verdadeiro para permitir que o form seja submetido
         return true;
       }
       catch (e) {
         // "e" é o valor que jogamos na exceção, ou seja o uri da página de erro
         form.action = e;
         // Mude para false se não quiser submeter o form
         return true;
       }
     }
   </script>
 </head>
 <body>
   <form id="formSaque" method="post" onsubmit="return Valida();">
     <input type="text" id="inputSaque" />
     <input type="submit" />
   </form>
 </body>
</html>

[Meela 0]

Francis, agora deu certo.

Só estou tentando entender por que o meu não funcionava.

Seria a falta dos getElementById?

 

E o que são as tags try e throw?

 

Obrigada, de verdade! =)

[Francis Schiavo 1]

Eu acredito que o seu não funcionava pelas condições mesmo. O código é interrompido assim que executa o return. Se passava na primeira condição, dava return e não executava as outras.

try..catch é uma estrutura de exceção, todas as linguagens de programação mais novas possuem tratamentos de erro desse tipo. A idéia é que o código contido dentro do catch seja executado APENAS em caso de erro. throw por sua vez, gera um erro e interrompe a execução do código contido em try e pulando direto para o catch.