Ir para conteúdo

POWERED BY:

Arquivado

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

Colla

Validação de campos

Por , em Javascript

Recommended Posts

Colla    0

Colla
Postado

Olá amigos do fórum.Estou procurando um scrip para validar formulários, mas sem usar o às vezes tão inconveniente alert.No próprio cadastro do site iMasters tem o sistema que eu gostaria de utilizar, onde os campos não preenchidos retornam na própria página com campos em vermelho. Algum de vcs poderiam me ajudar com isso, algum código fonte comentado?Obrigado por enquanto e abraço a todos!Rogério

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

no form:

 

<form action="" method="POST" name="frm" onSubmit='return Verifica(this);'>

função:

 

function Verifica(form){	if(form.campo.value == "")	{								document.getElementById("campo").style = "classe";								form.campo.focus();									return false;		}}

css:

 

classe{border: solid 2px #ff0000;}

acho q é isso, qqr coisa posta ae!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Colla    0

Colla
Postado

Ei Tiago, to postando o HTML pra você dar uma olhada, pq segui suas orientações mas não funcionou, se puder me auxiliar mai uma vez ficaria muito grato!

 

Rogério

 

 

<html><head>	<title>Untitled</title><style type="text/css">classe{border: solid 2px #cc0000;}</style>	<script type="text/javascript">function Verifica(form){	if(document.form.nome.value == "")	{		document.getElementById("nome").style = "classe";		document.form.nome.focus();			return false;		}		if(document.form.endereco.value == "")	{		document.getElementById("endereco").style = "classe";		document.form.endereco.focus();			return false;		}}</script>	</head><body><form action="" method="POST" name="form" onSubmit="return Verifica(this);"><table width="200" border="0" cellpadding="5" bordercolor="#999999">	<tr>		<td>Nome:</td>		<td><input name="nome" type="text" size="15" class="campo"></td></td>			</tr>	<tr>		<td>Endereço:</td>		<td><input name="endereco" type="text" size="15" class="campo"></td></td>			</tr>	<tr>		<td colspan="2">			<table width="80%" border="0" cellpadding="5" cellspacing="0" bordercolor="#dddddd" rules="rows" align="center">				<tr>					<td align="center"><input name="enviar" type="submit" value="Enviar" class="botoes"></td>				</tr>			</table>		</td>	</tr></table></form></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado 

<html><head><title>Untitled</title><style type="text/css">.classe{border: solid 2px #cc0000;}</style>	<script type="text/javascript">function Verifica(form){	if(form.nome.value == "")	{		document.getElementById("nome").className = "classe";		form.nome.focus();			return false;		}		if(form.endereco.value == "")	{		document.getElementById("endereco").className = "classe";		form.endereco.focus();			return false;		}}</script>	</head><body><form action="" method="POST" name="form" onSubmit="return Verifica(this);"><table width="200" border="0" cellpadding="5" bordercolor="#999999">	<tr>		<td>Nome:</td>		<td><input name="nome" type="text" size="15" class="campo" value=""></td></td>			</tr>	<tr>		<td>Endereço:</td>		<td><input name="endereco" type="text" size="15" class="campo" value=""></td></td>			</tr>	<tr>		<td colspan="2">			<table width="80%" border="0" cellpadding="5" cellspacing="0" bordercolor="#dddddd" rules="rows" align="center">				<tr>					<td align="center"><input name="enviar" type="submit" value="Enviar" class="botoes"></td>				</tr>			</table>		</td>	</tr></table></form></body></html>

no lugar de .style é .className, foi maus....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Colla    0

Colla
Postado

Oi Tiago, funcionou beleza, mas sem querer abusar da sua boa vontade, se puder me ajudar mais uma vez eu fico grato. Eu fiz umas adaptações no JS e não fui muito feliz na conclusão. Não estou conseguindo fazer o submit deste código sem as validações, e que todas as validações apareçam ao mesmo tempo no topo. Estou copiando o código de exemolo. Se puder nos ajudar ficaremos muito gratos.

 

Rogério

 

<html><head><title></title><style type="text/css">.mudacor { border:solid 1px #FF0000;}.campo { border:solid 1px #666666;}</style><script language="JavaScript"><!--function validaForm(){d = document.assine;//validar nomeif (d.nome.value == ""){	document.getElementById("teste1").style.display = "block";	document.getElementById("nome").className = "mudacor";	d.nome.focus()}else {	document.getElementById("teste1").style.display = "none";	document.getElementById("nome").className = "campo";}//validar enderecoif (d.endereco.value == ""){	document.getElementById("teste2").style.display = "block";	document.getElementById("endereco").className = "mudacor";	d.endereco.focus()	return false;}else {	document.getElementById("teste2").style.display = "none";	document.getElementById("endereco").className = "campo";}return true;}// --></script></head><body ><form method="post" name="assine" onSubmit="return validaForm()" action=""><table width="300" border="1" cellspacing="0" bordercolor="#dddddd" align="center">	<tr>		<td>			<table width="300" border="0" cellspacing="0" cellpadding="0">				<tr>					<td>					<ul>					<li id="teste1" style="display:none;">Preencha o nome</li>					<li id="teste2" style="display:none;">Preencha o eMail</li>					</ul>					</td>				</tr>			</table>		</td>	</tr>	<tr>		<td>			<table width="300" border="0" cellpadding="5" bordercolor="#999999" align="center">				<tr>					<td align="right">Nome:</td>					<td align="left"><input name="nome" type="text" size="15" class="campo" onBlur="return validaForm"></td>				</tr>				<tr>					<td align="right">Endereço:</td>					<td align="left"><input name="endereco" type="text" size="15" class="campo"></td></tr>				<tr>					<td colspan="2">						<table width="80%" border="0" cellpadding="5" cellspacing="0" bordercolor="#dddddd" rules="rows" align="center">							<tr>								<td align="center"><input name="enviar" type="submit" value="Prosseguir" class="botoes"></td>							</tr>						</table>					</td>				</tr>			</table>		</td>	</tr></table></form></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Colla    0

Colla
Postado

Desculpa cara, não entendi o que deseja fazer, explique melhor........

É o seguinte, se você testar esse código que colei, de baixo para cima, preenchendo o endereço antes do nome, ele vai dar o submit sem validar o nome. O intuito é sumir as msgs de validação de acordo com o prenchimento dos campos e fazer o submit qd todos os campos estiverem completos, independente da ordem que forem preenchidos, de baixo para cima ou de cima para baixo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado 

<html><head><title></title><style type="text/css">.mudacor { border:solid 1px #FF0000;}.campo { border:solid 1px #666666;}</style><script language="JavaScript"><!--function validaForm(){d = document.assine;//validar nomeif (d.nome.value == ""){	document.getElementById("teste1").style.display = "block";	document.getElementById("nome").className = "mudacor";	d.nome.focus();	return false;}else {	document.getElementById("teste1").style.display = "none";	document.getElementById("nome").className = "campo";}//validar enderecoif (d.endereco.value == ""){	document.getElementById("teste2").style.display = "block";	document.getElementById("endereco").className = "mudacor";	d.endereco.focus();	return false;}else {	document.getElementById("teste2").style.display = "none";	document.getElementById("endereco").className = "campo";}return true;}// --></script></head><body ><form method="post" name="assine" onSubmit="return validaForm()" action=""><table width="300" border="1" cellspacing="0" bordercolor="#dddddd" align="center">	<tr>		<td>			<table width="300" border="0" cellspacing="0" cellpadding="0">				<tr>					<td>					<ul>					<li id="teste1" style="display:none;">Preencha o nome</li>					<li id="teste2" style="display:none;">Preencha o eMail</li>					</ul>					</td>				</tr>			</table>		</td>	</tr>	<tr>		<td>			<table width="300" border="0" cellpadding="5" bordercolor="#999999" align="center">				<tr>					<td align="right">Nome:</td>					<td align="left"><input name="nome" type="text" size="15" class="campo" onBlur="return validaForm"></td>				</tr>				<tr>					<td align="right">Endereço:</td>					<td align="left"><input name="endereco" type="text" size="15" class="campo"></td></tr>				<tr>					<td colspan="2">						<table width="80%" border="0" cellpadding="5" cellspacing="0" bordercolor="#dddddd" rules="rows" align="center">							<tr>								<td align="center"><input name="enviar" type="submit" value="Prosseguir" class="botoes"></td>							</tr>						</table>					</td>				</tr>			</table>		</td>	</tr></table></form></body></html>

testa agora você esqueceu de colocar return false;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Colla    0

Colla
Postado

esse é justamente o meu problema, se eu colocar um return false em cada evento, ele vai mostrar uma validação de cada vez, se você tirar todos os return false e substituir o return true no fim, é exatamente oq eu preciso, porém ele não dá o submit depois. teste esse código aqui:

 

<html><head><title></title><style type="text/css">.mudacor { border:solid 1px #FF0000;}.campo { border:solid 1px #666666;}</style><script language="JavaScript"><!--function validaForm(){d = document.assine;//validar nomeif (d.nome.value == ""){	document.getElementById("teste1").style.display = "block";	document.getElementById("nome").className = "mudacor";	d.nome.focus()}else {	document.getElementById("teste1").style.display = "none";	document.getElementById("nome").className = "campo";}//validar enderecoif (d.endereco.value == ""){	document.getElementById("teste2").style.display = "block";	document.getElementById("endereco").className = "mudacor";	d.endereco.focus()	return false;}else {	document.getElementById("teste2").style.display = "none";	document.getElementById("endereco").className = "campo";}return false;}// --></script></head><body ><form method="post" name="assine" onSubmit="return validaForm()" action="testefdp.htm"><table width="300" border="1" cellspacing="0" bordercolor="#dddddd" align="center">	<tr>		<td>			<table width="300" border="0" cellspacing="0" cellpadding="0">				<tr>					<td>					<ul>					<li id="teste1" style="display:none;">Preencha o nome</li>					<li id="teste2" style="display:none;">Preencha o eMail</li>					</ul>					</td>				</tr>			</table>		</td>	</tr>	<tr>		<td>			<table width="300" border="0" cellpadding="5" bordercolor="#999999" align="center">				<tr>					<td align="right">Nome:</td>					<td align="left"><input name="nome" type="text" size="15" class="campo"></td>				</tr>				<tr>					<td align="right">Endereço:</td>					<td align="left"><input name="endereco" type="text" size="15" class="campo"></td></tr>				<tr>					<td colspan="2">						<table width="80%" border="0" cellpadding="5" cellspacing="0" bordercolor="#dddddd" rules="rows" align="center">							<tr>								<td align="center"><input name="enviar" type="submit" value="Prosseguir" class="botoes"></td>							</tr>						</table>					</td>				</tr>			</table>		</td>	</tr></table></form></body></html>

 

veja que ele faz todas as validações qo mesmo tempo (que é oq eu preciso) mas não dá o submit...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado 

<script language="JavaScript"><!--function validaForm(){d = document.assine;//validar nomeif (d.nome.value == ""){	document.getElementById("teste1").style.display = "block";	document.getElementById("nome").className = "mudacor";	d.nome.focus()}else {	document.getElementById("teste1").style.display = "none";	document.getElementById("nome").className = "campo";}//validar enderecoif (d.endereco.value == ""){	document.getElementById("teste2").style.display = "block";	document.getElementById("endereco").className = "mudacor";	d.endereco.focus()	return false;}else {	document.getElementById("teste2").style.display = "none";	document.getElementById("endereco").className = "campo";}document.getElementById('form').submit();}// --></script>

testa isso, se não rodar, só amanhã eu posso te responder, estou saindo, ok?

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