Poner imagen si comete un error en un campo de texto

ing_amc · #1 (**permalink**) 12/04/2006, 01:20

Hola

Lo que pasa es que necesito poner una imagen junto a un campo de texto si el campo de texto esta vacio, la comprobacion ya la hice pero no se meter la imagen.

Habia creado algo asi:

Código:

<script>
function pp(){
   if (document.postmodify.palabra.value==""){
      document.write('<img src="error.gif>');
      alert('Escribe algo');
      document.postmodify.palabra.focus();
   return false;
   }
}
</script>

Pero no me sale, aparte tengo que especificar en donde va la imagen.

Si alguien me puede ayudar, muchas gracias!!!!!

Saludos

[edit]
Tal vez no me explique bien, al entrar en hotmail en el formulario donde nos pide el mail y la contraseña, si los dejamos vacios nos pone un tache, exactamente es lo que necesito.

Gracias!!!!!
[/edit]

JavierB · #2 (**permalink**) 12/04/2006, 02:32

Hola ing_amc

Pon una imagen al lado del cuadro de texto:

<img id="im" src="" />

y pon así la función:

Código:

function pp(){
   if (document.postmodify.palabra.value==""){
      document.getElementById('im').src = 'tuimagen.jpg';
      alert('Escribe algo');
      document.postmodify.palabra.focus();
   return false;
   }
}

Saludos,

ing_amc · #3 (**permalink**) 12/04/2006, 05:41

Hola

Gracias pero que crees, no me sirvio, mira tuve que crear una imagen que no tuviera nada y que fuera transparente:

<img id="im" src="nada.gif">

Código:

function pp(){
   if (document.postmodify.palabra.value==""){
      document.getElementById('im').src = 'tuimagen.jpg';
      alert('Escribe algo');
      document.postmodify.palabra.focus();
   return false;
   }
}

Si lo dejaba como me habias dicho me ponia la imagen predefinida del navegador (un tache muy feo).

Saludos y Gracias!!!!

JavierB · #4 (**permalink**) 12/04/2006, 05:56

Hola de nuevo.

Tienes razón, había probado el código en Firefox y funcionaba bien, no me he dado cuenta de que IE es distinto.

También podrías hacerlo de otra forma. Pones la imágen que quieres que aparezca ocultandola con Css:

<img id="algo" src="error.jpg" style="visibility:hidden" />

y la haces aparecer cuando sea necesario:

document.getElementById('im').style.visibility = 'visible';

En cualquier caso me alegro de que lo hayas solucionado. Saludos,

ing_amc · #5 (**permalink**) 12/04/2006, 16:58

Ahora por ejemplo despues que la persona haya corregido (mejor dicho haya escrito algo en el <input text> y cuando salga del mismo como le hago para que la imagen se vuelva a esconder?

Gracias!!!!!!!!

ing_amc · #6 (**permalink**) 13/04/2006, 14:52

Me imagino que con onblur="mifuncion()".

Saludos

CHILENOCES · #7 (**permalink**) 13/04/2006, 23:27

podrias poner el código completo incluyendo el html el form y el javascript de validación?

muchas gracias.

ing_amc · #8 (**permalink**) 14/04/2006, 00:57

Codigo main.js

Código:

function agregar_form(){
	//revisamos que los campos del email no esten vacios
	if(document.form.email_nick.value=="" | document.form.email_host.value==""){
		var micapa=document.getElementById("mail");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes escribir tu email en los dos campos.');
					document.form.email_nick.focus();
						return false;
					}
	//revisamos que el campo del asunto no este vacio
	if(document.form.asunto.value==""){
		var micapa=document.getElementById("asunto");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes escribir el asunto del email.');
					document.form.asunto.focus();
						return false;
					}
	//revisamos que el campo del nombre tenga minimo 10 letras
	if(document.form.nombre.value.length < 10){
		var micapa=document.getElementById("nombre");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes escribir tu nombre completo (min. 10 caracteres.)');
					document.form.nombre.focus();
						return false;
					}	
	//Revisamos los campos del tel
	if(document.form.tel_clave.value=="" | document.form.tel.value==""){
		var micapa=document.getElementById("tel");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes escribir tu tel.');
					document.form.tel_clave.focus();
						return false;
					}
	//revisamos que el contenido del mensaje tenga minimo 40 letras
	if(document.form.contenido.value.length < 40){
		var micapa=document.getElementById("contenido");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes escribir un mensaje (min. 40 caracteres.)');
					document.form.contenido.focus();
						return false;
					}
	//revisamos la prioridad			
	if(document.form.prioridad.value==""){
		var micapa=document.getElementById("prioridad");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes selecionar la prioridad');
					document.form.prioridad.focus();
						return false;
					}
	//revisamos el sexo
	if(document.form.sexo.value==""){
		var micapa=document.getElementById("sexo");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes selecionar tu sexo');
					document.form.sexo.focus();
						return false;
					}
	//revisamos la calificacion
	if(document.form.rainting.value==""){
		var micapa=document.getElementById("rainting");
			micapa.style.display=(document.all)?'block':'block';
				alert('Debes selecionar un rainting');
					document.form.rainting.focus();
						return false;
					}
	if(document.form.prioridad.value=="Urgente"){
		alert('Al ser de prioridad urgente, se va a agilizar los tramites sí así lo prefiere.');
					}
	var cero=document.form.email_nick.value; //nick del mail
	var uno=document.form.email_host.value; //host del mail
	var dos=document.form.asunto.value; //asunto del mail
	var tres=document.form.nombre.value; //nombre
	var cuatro=document.form.tel_clave.value; //clave lada del telefono
	var cinco=document.form.tel.value; //telefono
	var seis=document.form.estado.value; //estado
	var siete=document.form.contenido.value; //cuerpo del mensaje
	var ocho=document.form.prioridad.value; //prioridad
	var nueve=document.form.sexo.value; //sexo
	var diez=document.form.rainting.value; //calificacion
	var item0="Tu e-mail: "+cero+"@"+uno+"\n";
	var item1="Asunto: "+dos+"\n";
	var item2="Tu nombre: "+tres+"\n";
	var item3="Tu tel: "+cuatro+""+cinco+"\n";
	var item4="Tu estado: "+seis+"\n";
	var item5="El contenido: "+siete+"\n";
	var item6="Prioridad del email: "+ocho+"\n";
	var item7="Tu sexo: "+nueve+"\n";
	var item8="¿Que te parece la web? "+diez+"\n";
	var item9="\n\n Muchas gracias por utilizar el servicio de e-mail\n\nAtte. Damian Ventura";
	var pregunta="Confirma tu información:\n\n";
	var mensaje = ""+pregunta+""+item0+""+item1+""+item2+""+item3+""+item4+""+item5+""+item7+""+item6+""+item8+""+item9+"";
		alert('Por favor, no des datos falsos y/o incorrectos, ya que se tardaría mas tu borrado y/o alteración.\n\nAtte. Damian Ventura');
			return window.confirm(mensaje);
		}

Html

Código:

<form action="mail.php" method="post" name="form" onsubmit="return agregar_form()">
						<tr>
							<td width="202" valign="middle"><font class="normal">Tu e-mail</font></td>
							<td width="548"><div id="mail" style="display:none"><img src="images/icon_err.gif"></div>
<input type="text" name="email_nick" class="form" size="15"> <font class="normal"> @ </font><input type="text" name="email_host" class="form" size="15"><font class="normal"> ¿No tienes e-mail?</font> <a href="hotmail.com/" target="_blank" class="mail">Click aquí</a></td>
						</tr>
						<tr>
							<td width="202" valign="middle"><font class="normal">Asunto:</font></td>
							<td width="548"><div id="asunto" style="display:none"><img src="images/icon_err.gif"></div>
							<input type="text" name="asunto" class="form" size="45" value="Información sobre Buró de Crédito"></td>
						</tr>
						<tr>
							<td width="202" valign="middle"><font class="normal">Nombre completo:</font></td>
							<td width="548"><div id="nombre" style="display:none"><img src="images/icon_err.gif"></div>
											<input type="text" name="nombre" class="form" size="45"></td>
						</tr>
						<tr>
							<td width="202" valign="middle"><font class="normal">Teléfono (con clave lada):</font></td>
							<td width="548"><div id="tel" style="display:none"><img src="images/icon_err.gif"></div>
							<input type="text" name="tel_clave" class="form" size="3" maxlength="3">-<input type="text" name="tel" class="form" size="17"></td>
						</tr>
						<tr>
							<td width="202" valign="middle"><font class="normal">Tu estado:</font></td>
							<td width="548"><select name="estado" class="form">
												<option value="Aguascalientes">Aguascalientes</option>
												<option value="Baja California">Baja California</option>
												<option value="Baja California Sur">Baja California Sur</option>
												<option value="Campeche">Campeche</option>
												<option value="Chiapas">Chiapas</option>
												<option value="Chihuahua">Chihuahua</option>
												<option value="Coahuila">Coahuila</option>
												<option value="Colima">Colima</option>
												<option value="Distrito Federal" selected>Distrito Federal</option>
												<option value="Durango">Durango</option>
												<option value="Estado de México">Estado de México</option>
												<option value="Guanajuato">Guanajuato</option>
												<option value="Guerrero">Guerrero</option>
												<option value="Hidalgo">Hidalgo</option>
												<option value="Jalisco">Jalisco</option>
												<option value="Michoacán de Ocampo">Michoacán de Ocampo</option>
												<option value="Morelos">Morelos</option>
												<option value="Nayarit">Nayarit</option>
												<option value="Nuevo León">Nuevo León</option>
												<option value="Oaxaca">Oaxaca</option>
												<option value="Puebla">Puebla</option>
												<option value="Querétaro de Arteaga">Querétaro de Arteaga</option>
												<option value="Quintana Roo">Quintana Roo</option>
												<option value="San Luis Potosí">San Luis Potosí</option>
												<option value="Sinaloa">Sinaloa</option>
												<option value="Sonora">Sonora</option>
												<option value="Tabasco">Tabasco</option>
												<option value="Tamaulipas">Tamaulipas</option>
												<option value="Tlaxcala">Tlaxcala</option>
												<option value="Veracruz de Ignacio de la Llave">Veracruz de Ignacio de la Llave</option>
												<option value="Yucatán">Yucatán</option>
												<option value="Zacatecas">Zacatecas</option>
										</select></td>
						</tr>
						<tr>
							<td width="202" valign="top"><font class="normal">Mensaje:</font></td>
....... Cortado >> Sigue en el siguiente post >>

ing_amc · #9 (**permalink**) 14/04/2006, 00:58

Código:

<td width="548"><div id="contenido" style="display:none"><img src="images/icon_err.gif"></div>
							<textarea rows="12" name="contenido" cols="71" class="form"></textarea></td>
						</tr>
						<tr>
							<td width="202" valign="middle"><font class="normal">Prioridad del E-mail:</font></td>
							<td width="548" valign="middle"><div id="prioridad" style="display:none"><img src="images/icon_err.gif"></div>
										<select name="prioridad" class="form">
											<option value=""></option>
											<option value="Urgente">Urgente</option>
											<option value="Medio Urgente">Medio Urgente</option>
											<option value="Normal">Normal</option>
											</select></td>
						</tr>
						<tr>
							<td width="202" valign="middle"><font class="normal">Sexo:</font></td>
							<td width="548"><div id="sexo" style="display:none"><img src="images/icon_err.gif"></div>
										<select name="sexo" class="form">
												<option value=""></option>
												<option value="Hombre">Hombre</option>
												<option value="Mujer">Mujer</option>
											</select></td>
						</tr>
						<tr>
							<td width="202" valign="middle"><font class="normal">¿Que te parece la web?</font></td>
							<td width="548"><div id="rainting" style="display:none"><img src="images/icon_err.gif"></div>
											<select name="rainting" class="form">
												<option value=""></option>
												<option value="Excelente">Excelente</option>
												<option value="Muy buena">Muy buena</option>
												<option value="Buena">Buena</option>
												<option value="Regular">Regular</option>
												<option value="Mala">Mala</option>
												<option value="Muy Mala">Muy mala</option>
												</select></td>
						</tr>
						<tr>
							<td width="202" height="10"></td>
							<td width="548"></td>
						</tr>
							<td width="202"></td>
							<td width="548"><input type="submit" name="enviar" value="E n v i a r" class="form_boton"><input type="hidden" value="<?=$ip_host;?>" name="ip_host"><input type="hidden" value="<?=$navegador;?>" name="navegador_clie"><input type="hidden" value="<?=$sistema;?>" name="sistema_clie"><input type="hidden" value="<?=$cabecera_agent;?>" name="useragent"></form>

Ese es mi codigo. Gracias!!

JavierB · #10 (**permalink**) 14/04/2006, 03:12

Hola ing_amc

Esto no lo he probado pero debería funcionar:

Código:

function agregar_form(){
  im = document.form.getElementsByTagName('img');
  for (i=0; ele = im[i]; i++)
    ele. style.display = 'none';
  //revisamos que los campos del email no esten vacios

Espero que te sirva. Saludos,