Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Paulo Freitas Nobrega

Problema estranho no código

Por , em Javascript

Recommended Posts

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

olá pessoal estou criando um teste com a validação de formularios para que fiquem mais dinamicos. O código é o seguinte

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">.erro {padding: 3px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 9px;color: #112844;background-color:#DFEFFF;border: 1px dotted #075c84; }.box {display: none; }</style></head><body><script language="javascript"><!-- function Valida(anos) { var idade = document.getElementById('Idade'); var imagem = document.getElementById('imagem'); var erro = document.getElementById('erro'); if(anos >= 18) { imagem.style.display="block"; erro.style.display = "none"; } else { imagem.style.display="none" erro.style.display = "block"; idade.focus(); } } function Valida2(nomes) { var nome = document.getElementById('Nome'); var imagem2 = document.getElementById('imagem2'); var erro2 = document.getElementById('erro2'); if(nomes >= 18) { imagem2.style.display="block"; erro2.style.display = "none"; } else { imagem2.style.display="none" erro2.style.display = "block"; nome.focus(); } }--></script><form> <input type="text" name="idade" id="Idade" onblur="Valida(idade.value)"> <div id="erro" class="box & erro"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div> <div id="imagem" class="box"> <img src="btn_azul.jpg"> </div> <br> <input type="text" name="nome" id="Nome" onblur="Valida2(nome.value)"> <div id="erro2" class="box & erro"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div> <div id="imagem2" class="box"> <img src="btn_azul.jpg"> </div> <br></form></body>

O problema é que quando clico no input para digitar algo o browser trava, e isso só acontece no I.E, o engraçado é que quando tinha apenas um input e a função Valida ele funcionada perfeitamente. Quando rodo ele no Fire Fox ele não trava, mas também as linhas :

idade.focus(); e nome.focus();

não funciona. Alguém poderia me dar uma mãozinha?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

pelo que vi a lógca tá legal só faltava algumas vírgulas...

 

<script language="javascript"><!--function Valida(anos) {var idade = document.getElementById('Idade');var imagem = document.getElementById('imagem');var erro = document.getElementById('erro');if(anos >= 18) {imagem.style.display="block"; erro.style.display = "none";} else {imagem.style.display="none"[b];[/b]erro.style.display = "block";idade.focus();}}function Valida2(nomes) {var nome = document.getElementById('Nome');var imagem2 = document.getElementById('imagem2');var erro2 = document.getElementById('erro2');if(nomes >= 18) {imagem2.style.display="block"; erro2.style.display = "none";} else {imagem2.style.display="none"[b];[/b]erro2.style.display = "block";nome.focus();}}--></script>

ve se com isso resolve...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Cara pode comprar outro PC que esse já erra, isso é um erro extremo...hehehehehe

 

Que errinho...

 

você criou uma classe que tem o mesmo id, ai que tá o problema...

 

.[b]erro[/b] {padding: 3px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 9px;color: #112844;background-color:#DFEFFF;border: 1px dotted #075c84; }

e:

 

<div id="erro">

mude um dos dois, ok?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

PKTIAGO obrigado pela ajuda. Mas ainda esta dando erro, eu tinha colocado id="erro" e class="erro", mas mudei do mesmo jeito para garantir. o código ficou assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">.erro_box {padding: 3px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 9px;color: #112844;background-color:#DFEFFF;border: 1px dotted #075c84; }.box {display: none; }</style></head><body><script language="javascript"><!-- function Valida(anos) { var idade = document.getElementById('Idade'); var imagem = document.getElementById('imagem'); var erro = document.getElementById('erro'); if(anos >= 18) { imagem.style.display = "block"; erro.style.display = "none"; } else { imagem.style.display = "none"; erro.style.display = "block"; idade.focus(); } } function Valida2(nomes) { var nome = document.getElementById('Nome'); var imagem2 = document.getElementById('imagem2'); var erro2 = document.getElementById('erro2'); if(nomes >= 18) { imagem2.style.display = "block"; erro2.style.display = "none"; } else { imagem2.style.display = "none"; erro2.style.display = "block"; nome.focus(); } }--></script><form> <input type="text" name="idade" id="Idade" onblur="Valida(idade.value)"> <div id="erro" class="box & erro_box"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div> <div id="imagem" class="box"> <img src="btn_azul.jpg"> </div> <br> <input type="text" name="nome" id="Nome" onblur="Valida2(nome.value)"> <div id="erro2" class="box & erro_box"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div> <div id="imagem2" class="box"> <img src="btn_azul.jpg"> </div> <br></form></body></html>

To ficando doido com isso.....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

e como coloco, pois quero que ele tenha as duas classes, tanto o box que faz o efeito de desaparecimento, tanto o erro_box que personaliza a div. Tem como aderir as duas classes para o mesmo objeto?Tirei mas ainda está dando o erro! meu deus do ceu!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

cria outra com as 2 juntas cara...

 

tô:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">.erro {	padding: 3px;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #112844;	background-color:#DFEFFF;	border: 1px dotted #075c84; }.box {	display: none; }.box_erro{	display: none;	padding: 3px;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #112844;	background-color:#DFEFFF;	border: 1px dotted #075c84;}</style></head><body><script language="javascript"><!--function Valida(anos) {	var idade = document.getElementById('Idade');	var imagem = document.getElementById('imagem');	var erro = document.getElementById('erro'); 	if(anos >= 18) 	{		imagem.style.display = "block"; 		erro.style.display = "none";	} 	else 	{ 		imagem.style.display = "none";		erro.style.display = "block";		idade.focus(); 	} }function Valida2(nomes) {	var nome = document.getElementById('Nome');	var imagem2 = document.getElementById('imagem2');	var erro2 = document.getElementById('erro2');	if(nomes >= 18) 	{		imagem2.style.display = "block"; 		erro2.style.display = "none";	} 	else 	{		imagem2.style.display = "none";		erro2.style.display = "block";		nome.focus(); 	}}--></script><form><input type="text" name="idade" id="Idade" onblur="Valida(idade.value)"><div id="erro" class="box_erro"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div><div id="imagem" class="box"> <img src="btn_azul.jpg"> </div><br><input type="text" name="nome" id="Nome" onblur="Valida2(nome.value)"><div id="erro2" class="box_erro"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div><div id="imagem2" class="box"> <img src="btn_azul.jpg"> </div><br></form></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

parti por isso e faça os ajustes...

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">.erro {	display: none; }</style></head><body><script language="javascript"><!--function Teste(idade) {	if(idade <= 18) 	{		document.getElementById('erro1').style.display = "block";	}	else	{		 document.getElementById('txtNome').focus();	}}--></script><form><input name="txtIdade" id="txtIdade" value="" onChange="Teste(this.value);"><div id="erro1" class="erro">	Erro</div><br/><input name="txtNome" id="txtNome" value="" onChange="Teste(this.value);"><div id="erro2" class="erro">	Erro</div></form></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

o erro está no .focus():

nome.focus();

Por isso ele trava no I.E, no fire fox isso não funciona fazendo assim a página não travar....Agora que o problema está melhor diaguinosticado, se alguém souber corrigilo agradeço...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

já havia tentado isso também, mas como eu disse, ele trava, só que percebi mais uma coisa, ele só trava se caso você usar o ›table ou clicar no próximo input. Se caso você clicar fora do form em qualquer espaço em branco da página o script roda perfeitamente.Agradeço PKTIAGO que desde está manhã esta me ajudando com paciência neste desafio, se tiver mais alguma idéia posta ai, estou tentando aqui também, se caso conseguir solucionar isso posto para os demais membros que passarem pelo mesmo problema. Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

agora vai!hehehe

 

testa...

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">.box {	display: none; }.box_erro{	display: none;	padding: 3px;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #112844;	background-color:#DFEFFF;	border: 1px dotted #075c84;}</style><script language="javascript"><!--function Valida(valor,imagem,erro) {	if(valor <= 18) 	{		frm.idade.focus(); 		imagem.style.display = "none";		erro.style.display = "block";		return false;	} }--></script></head><body><form name="frm" action="" method="POST"><input type="text" name="idade" id="idade" onChange="Valida(this.value,document.getElementById('imagem'),document.getElementById('erro'));"><div id="erro" class="box_erro"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div><div id="imagem" class="box"> <img src="btn_azul.jpg"> </div><br><input type="text" name="nome" id="nome" onChange="Valida(this.value,document.getElementById('imagem2'),document.getElementById('erro2'));"><div id="erro2" class="box_erro"> VOCÊ É DE MENOR, O CADASTRO É PERMITIDO APENAS PARA PESSOAS MAIORES DE IDADE. </div><div id="imagem2" class="box"> <img src="btn_azul.jpg"> </div><br></form></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo Freitas Nobrega    0

Paulo Freitas Nobrega
Postado

Agora deu certo...................................... huhhuhuhu, tem como me dar uma explicação rapidinha, pois sou ainda leigo no assunto e to meio confuso com sua super soluçãoooooooooooooooooo, tem como PKTIAGO.....?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Tem sim:

 

function Valida(valor,imagem,erro) //valor= o valor do campo, imagem= imagem que vai parecer, erro= msg de erro{	if(valor <= 18) 	{		frm.idade.focus(); //nome do form + nome do campo		imagem.style.display = "none";		erro.style.display = "block";		return false; //e aqui a "mágica" temos fazer isso para dar uma espécie de uma abortagem	    } }

Então é isso, qualquer dúvida poste ai.............

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito