Ir para conteúdo

POWERED BY:

Arquivado

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

Joaocavajo

Usando duas funções em um mesmo evento (onBlur)

Recommended Posts

Olá pessoal, beleza?

Então, eu estou criando aqui um formulário, e nele uso duas funções em js, uma que é para colocar os valores dentro do campo padrões, por exemplo: "Digite seu nome". Se o usuário não digita nada, ele volta pro valor padrão. A outra função é uma que verifica o e-mail, vendo se é válido.
O problema é que eu coloquei as duas funções tanto usando:

onBlur="ValidaEmail();escreverPadrao(this);"

e também:

onBlur="ValidaEmail();" onBlur="escreverPadrao(this);"

Porém, não dá certo, na hora de testar o formulário ele verifica o e-mail direito, mas o campo do E-mail não está sendo limpado, apenas os outros. Vou postar as duas funções .js e a parte do formulário:

function validar_email() {
<!--
	var campo_email = document.id_form.campo_email.value;
	//Checando se o endereço e-mail não esta vazio
	if(campo_email=="") {
		alert("É necessário preencher o campo e-mail!");
		document.id_form.campo_email.focus();
		return false;
	}
	//Checando se o endereço de e-mail é válido
	if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.id_form.campo_email.value))) {
		alert("Preencha um endereço de e-mail válido!");
		document.id_form.campo_email.focus();
		return false;
	}
}
//função que limpa os campos

function limparPadrao(campo) {
	if (campo.value == campo.defaultValue) {
		campo.value = "";
	}
}

function escreverPadrao(campo) {
	if (campo.value == "") {
		campo.value = campo.defaultValue;
	}
}

	<table>
  <form action="processar.html" id="id_form" name="id_form" method="post" onSubmit="return validar_email();">
	
       		<tr>
				<th align="left" valign="top">Nome: <font color="#FF0000">*</font> </th>
				<td><input type="text"  size="50" maxlength="50" name="busca" id="busca" value="Digite seu nome" onFocus="limparPadrao(this);" onBlur="escreverPadrao(this);"/></td>
			</tr>
			<tr>
				<th align="left" valign="top">E-Mail: <font color="#FF0000">*</font> </th>
				<td><input type="text" name="campo_email" size="40" maxlength="40" id="busca" value="Digite seu e-mail" onBlur="ValidaEmail();escreverPadrao(this);" onFocus="limparPadrao(this);"  ></td>
			</tr>
			<tr>
				<th align="left" valign="top">Assunto: <font color="#FF0000">*</font> </th>
				<td><input type="text"  size="20" maxlength="20" name="busca" id="busca" value="Assunto" onFocus="limparPadrao(this);" onBlur="escreverPadrao(this);"/></td>
				</tr>
                <tr>
                	<th align="left" valign="top">Mensagem: <font color="#FF0000">*</font> </th>
                    <td> <textarea  rows="10" cols="60" style="resize:none" id="busca" onFocus="limparPadrao(this);" onBlur="escreverPadrao(this);">Sua mensagem aqui:</textarea></td>
                </tr>
		</table>
        <table  width="1200"><tr><th> <center><font color="#FF0000" size="-1">*</font> <font size="-1"> Campos de preenchimento obrigatório</font></center></th></tr> </table> <br>
		<table width="740">
				<tr>
				<td><center><input type="submit" name="cmdenvio" value="Enviar" ><input type="reset" name="cmdlimpar" value="Limpar" /></center>
				</tr>
		</table>
</table>
	</form>

E segue um print do formulário - quando clico no e-mail, ele não volta pro valor padrão.

il9.png

Agradeço a quem puder me ajudar :)

Compartilhar este post


Link para o post
Compartilhar em outros sites


<html>

<head>

<script type="text/javascript">

 

window.onload = function(){

 

document.getElementById("email").onblur = function(){

if(this.value == ""){

 

alert("É necessário preencher o campo e-mail!");

return false;

 

}else if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.value))) {

 

alert("Preencha um endereço de e-mail valido!");

this.value = '';

return false;

}

return true;

}

}

</script>

</head>

<body>

<input type="text" id="email" placeholder="Digite seu e-mail">

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

De certa forma funcionou Cristiano, só que quando clico no botão que envia, ele não mostra o alert de erro. Sou meio novato em javascript e não sei muito bem. O que poderia fazer?



De certa forma funcionou Cristiano, só que quando clico no botão que envia, ele não mostra o alert de erro. Sou meio novato em javascript e não sei muito bem. O que poderia fazer?

Compartilhar este post


Link para o post
Compartilhar em outros sites


<script type="text/javascript">

window.onload = function(){

 

document.getElementById(id_do_botao_enviar).onclick = function(e)

{

var mail = document.getElementById(id_do_inpu_email).value;

if(mail == "" || !/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(mail))

{

e.preventDefault();

alert('email invalido');

}

}

 

}

</script>

 

 

não testei, mas deve funcionar contra o evento click no botao somente, testa ali

Compartilhar este post


Link para o post
Compartilhar em outros sites


<html>

<head>

<script type="text/javascript">

 

window.onload = function(){

 

document.f.onsubmit = function(){

 

var v = this.getElementsByTagName('input'),

a = [[],[]],

o = 0;

 

for(var x in v){

if(v[x].type == "text"){

var c = v[x];

if(c.value == "" || c.value == "undefined" || c.value == null){

a[0][o] = c.id;

}

 

if(c.id == "email"){

if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(c.value))) {

a[1][0] = false;

}else{

a[1][0] = true;

}

}

}

o++;

}

 

if(a[0].length == 1){

alert("O campo " + a[0] + " esta vazio.");

return false;

}else if(a[0].length > 1){

alert("Os campos "+ (a[0].join(", ")).trim(",") + " estao vazios.");

return false;

}

 

if(a[1][0] == false){

alert("Digite um email valido");

return false;

}

 

}

 

document.getElementById("email").onblur = function(){

if(this.value == ""){

alert("É necessário preencher o campo e-mail!");

return false;

}

else

if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.value))) {

alert("Preencha um endereço de e-mail valido!");

this.value = '';

return false;

}

return true;

}

}

</script>

</head>

<body>

<form name="f">

<input type="text" id="email" placeholder="Digite seu e-mail">

<input type="text" id="nome" placeholder="Digite seu nome">

<input type="text" id="assunto" placeholder="Digite um assunto">

<input type="submit" value="enviar">

</form>

</body>

</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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