ayuda con formulario de contacto, remplazo de alert() en la validacion...

binagol · #1 (**permalink**) 13/09/2008, 18:24

hola a todos,
les explico mi problema, yo tengo un formulario de contacto, en el cual tengo un JS con la validacion de los campos.
en cuano haya un campom que no valide, puse un alert(), con el cual avisa que debe completar x campo.

lo que necesitaria hacer es, en lugar de ese alert(), es que en la pagina aparezcan enumerados los errores.
como debo hacer eso???

que tendria que agregar a la validacion.... y a la pagina???

la validacion quedo:(esas son <select>por eso casi no tiene validacion...)

if(barrio == "seleccione una opcion"){
alert('Debe elegir un Barrio');
form1.barrio.focus();return (false);}

if(type == "seleccione una opcion"){
alert('Debe seleccinar el tipo de propiedad');
form1.type.focus();return (false);}

if(room == "seleccione una opcion"){
alert('Debe indicar la cantidad de dormitorios');
form1.room.focus();return (false);}

if(estado == "seleccione una opcion"){
alert('Debe indicar el estado de su propiedad');
form1.estado.focus();return (false);}

Muchas Gracias de Antemano

Legoltaz · #2 (**permalink**) 14/09/2008, 00:45

Pues podrías poner un div que no se muestre (display:none) hasta que tu lo digas en el formulario, a la vez que especificas su contenido (innerHTML).

binagol · #3 (**permalink**) 14/09/2008, 12:33

Cita:

Iniciado por Legoltaz

Pues podrías poner un div que no se muestre (display:none) hasta que tu lo digas en el formulario, a la vez que especificas su contenido (innerHTML).

como haria eso????

Gracias

Legoltaz · #4 (**permalink**) 14/09/2008, 12:50

Algo así:

Código HTML:

Ver original<div id="error" style="display:none;"></div>

Código JavaScript:

Ver original<script>
var divError = document.getElementById('error');
if(barrio == "seleccione una opcion"){
divError.innerHTML = 'Debe elegir un barrio<br />';
divError.style.display = 'block';
document.form1.barrio.focus();
return false;
}
if(type == "seleccione una opcion"){
divError.innerHTML = 'Debe seleccionar el tipo de propiedad<br />';
divError.style.display = 'block';
document.form1.type.focus();
return false;
}
if(room == "seleccione una opcion"){
divError.innerHTML = 'Debe indicar la cantidad de dormitorios<br />';
divError.style.display = 'block';
document.form1.room.focus();
return false;
}
if(estado == "seleccione una opcion"){
divError.innerHTML = 'Debe indicar el estado de su propiedad<br />';
divError.style.display = 'block';
document.form1.estado.focus();
return false;
}
</script>

binagol · #5 (**permalink**) 14/09/2008, 13:55

Barabaro, gracias, lo pruebo y comento.....

hector2c · #6 (**permalink**) 14/09/2008, 21:35

jeje, me ganaron, bueno, solo falto agregar en caso esten ok, para no mostrar el div del mensaje cambias el block por el none...

binagol · #7 (**permalink**) 15/09/2008, 20:22

Donde tendria que agregar eso???.... recien ahora estaba por implementarlo y me encontre con lo que mensionas...

hector2c · #8 (**permalink**) 15/09/2008, 22:14

tal vezto te ayude:

Código HTML:

<html>
  <script language="javascript" type="text/javascript">
	
	  function validar(f){
		  nombre = f.nombre.value;
			edad = f.edad.value;
			error_div_nombre = document.getElementById('div_nombre');
			error_div_edad = document.getElementById('div_edad');
			document.getElementById('div_envio').style.display = 'none';
			if (nombre==""){
			  error_div_nombre.style.display = 'block';
				f.nombre.focus();
			  return false;
			}else{
			  error_div_nombre.style.display = 'none';
			}
			
			if (edad==""){
			  error_div_edad.style.display = 'block';
				f.edad.focus();
			  return false;
			}else{
			  error_div_edad.style.display = 'none';
			}
			
			return true;
						  
		}
  </script>
  <style type="text/css">
	  body, input, td {
		  font-family: Tahoma;
			font-size: 11px;
			color: #666;
		}
		
	  .error {
		  background-color:#f66;
			color: #fff;
			padding: 10px;
			display: none;
		}
		
		.envio {
		  background-color:#FFFFDF;
			padding: 10px;
		}
  </style>
  <body>
    <form action="<?=$PHP_SELF?>" method="post" name="formulario" id="formulario" onsubmit="return validar(this);">
      <table>
        <tbody>
          <tr>
            <td>nombre</td>
            <td><input name="nombre" type="text" id="nombre" /></td>
          </tr>
          <tr>
            <td>edad</td>
            <td><input name="edad" type="text" id="edad" /></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2"><input name="enviar" type="submit" id="enviar" value="Enviar" /></td>
          </tr>
        </tfoot>
      </table>
	  </form>
    <div id="div_nombre" class="error">por favor ingrese su nombre</div>
    <div id="div_edad" class="error">por favor ingrese su edad</div>
    <div id="div_envio" class="envio">
    <?php
		  if (isset($_POST['enviar'])){
			  echo "<strong>nombre: </strong>".$_POST['nombre']."<br>";
				echo "<strong>edad: </strong>".$_POST['edad'];
			}
		?>
    </div>
  </body>
</html>

suerte n_n

binagol · #9 (**permalink**) 16/09/2008, 16:49

Ok, Gracias. lo pruebo y comento como me fue....

te pasaste con el eejemplo.....

Gracias

binagol · #10 (**permalink**) 17/09/2008, 09:47

una consulta:

si quiero sacar el JS afuera del archivo y lo agrego en el <head> como cambia onsubmit="return validar(this)" ???

Muchas Gracias de antemano

David · #11 (**permalink**) 17/09/2008, 09:53

No, no cambia nada, como ya te explicaron en tu otro tema.

P.S.: No es necesario que repitas mensajes.

binagol · #12 (**permalink**) 17/09/2008, 10:05

jeje... gracias......

binagol · #13 (**permalink**) 17/09/2008, 17:46

como cambia el ultimo codigo, si yo quiero que valide y muestre todos los div de error, no solo el primero donde se presenta el error, estuve probando pero no encuentro la solucion....

POR FAVOR AYUDA.... ESE CODIGO ES DE PRIMERA, PERO QUIERO MEJORARLO!!! COMO LO CAMBIO????

Por otra parte, es posible realizar una validacion de este tipo con PHP, o con otra cosa del lado del servidor, o tiene que ser realizada del lado del cliente (JS)????

Muchas gracias a todos.

hector2c · #14 (**permalink**) 18/09/2008, 00:41

hola amigo, mira mira, disculpa por no contestar a tiempo, he estado con algunos trabajos, aqui te envio el código, con tus requisitos. espero te sirva, nus vemos cuidate n_n

Código HTML:

<html>
  <script language="javascript" type="text/javascript">
	
	  function validar(f){
		  nombre = f.nombre.value;
			edad = f.edad.value;
			error_div_nombre = document.getElementById('div_nombre');
			error_div_edad = document.getElementById('div_edad');
			document.getElementById('div_envio').style.display = 'none';
			
		  fallo_validar = false;
			
			if (edad==""){
			  error_div_edad.style.display = 'block';
				f.edad.focus();
			  fallo_validar = true;
			}else{
			  error_div_edad.style.display = 'none';
			}

			if (nombre==""){
			  error_div_nombre.style.display = 'block';
				f.nombre.focus();
			  fallo_validar = true;
			}else{
			  error_div_nombre.style.display = 'none';
			}
			
			if (fallo_validar==true)
			  return false;
			else
			  return true;
						  
		}
  </script>
  <style type="text/css">
	  body, input, td {
		  font-family: Tahoma;
			font-size: 11px;
			color: #666;
		}
		
	  .error {
		  background-color:#f66;
			color: #fff;
			padding: 10px;
			display: none;
		}
		
		.envio {
		  background-color:#FFFFDF;
			padding: 10px;
		}
  </style>
  <body>
    <form action="<?=$PHP_SELF?>" method="post" name="formulario" id="formulario" onSubmit="return validar(this);">
      <table>
        <tbody>
          <tr>
            <td>nombre</td>
            <td><input name="nombre" type="text" id="nombre" /></td>
          </tr>
          <tr>
            <td>edad</td>
            <td><input name="edad" type="text" id="edad" /></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2"><input name="enviar" type="submit" id="enviar" value="Enviar" /></td>
          </tr>
        </tfoot>
      </table>
	  </form>
    <div id="div_nombre" class="error">por favor ingrese su nombre</div>
    <div id="div_edad" class="error">por favor ingrese su edad</div>
    <div id="div_envio" class="envio">
    <?php
		  if (isset($_POST['enviar'])){
			  echo "<strong>nombre: </strong>".$_POST['nombre']."<br>";
				echo "<strong>edad: </strong>".$_POST['edad'];
			}
		?>
    </div>
  </body>
</html>

CHuLoSoY · #15 (**permalink**) 18/09/2008, 05:29

Cita:

Iniciado por binagol

Por otra parte, es posible realizar una validacion de este tipo con PHP, o con otra cosa del lado del servidor, o tiene que ser realizada del lado del cliente (JS)????

Claro que sí.

Código PHP:

  if ( !$_POST['campo'] ) { echo "Debes cumplimentar los campos"; }

juegas un poco con esto y ya lo tienes.

binagol · #16 (**permalink**) 18/09/2008, 06:50

muchas gracias!!!! era lo queria!!!!

se pasaron!!!
saludos y suerte...

binagol · #17 (**permalink**) 18/09/2008, 08:18

barbaro muchas gracias!!!!

Para terminar, estaba intentando agregar un setTimeout() entre cada div....

pense en hacerlo de la siguiente forma, pero no funciona.... como deberia encararlo? o cual es mi error???

Código:

  
<script language="javascript" type="text/javascript">
	
	  function validar(f){
		  nombre = f.nombre.value;
			edad = f.edad.value;
			error_div_nombre = document.getElementById('div_nombre');
			error_div_edad = document.getElementById('div_edad');
			document.getElementById('div_envio').style.display = 'none';
			
		  fallo_validar = false;
			
			if (nombre==""){
  			  setTimeout (function () {
			  error_div_nombre.style.display = 'block';
			  },1000);
			  f.nombre.focus(); 
			  fallo_validar = true;
			}else{
			  error_div_nombre.style.display = 'none';
			}			
			
			if (edad==""){
			  setTimeout (function (){ error_div_edad.style.display = 'block';
			  }, 1000);
			  f.edad.focus(); 
			  fallo_validar = true;		 
			}else{
              error_div_edad.style.display = 'none';
			}
	
			if (fallo_validar==true)
			  return false;
			else
			  return true;
						  
		}
  </script>

Legoltaz · #18 (**permalink**) 18/09/2008, 08:35

Prueba quitándole lo de function().

Código JavaScript:

Ver originalsetTimeout("error_div_edad.style.display='block'",1000);

binagol · #19 (**permalink**) 18/09/2008, 08:55

ok, ahora funciona, muchas gracias Legoltaz!!!!

pero no como yo quiero...

atrasa 1 segundo, pero despues habilita los 2 div juntos....

lo que yo quiero es:
pasa 1 segundo, habilita 1 div. pasa otro segundo y habilita el otro div. y asi susecivamente, con otros div...

En caso de que algun div no requiera ser habilitado, que el primero que lo requiera despues de ese, se habilite en 1 seg. Osea, que lo que se vea es 1 seg entre div y div.

Muchas Gracias de antemano y disculpe si pregunto estupideses o cosas muy basica.....

PD. cambiando de tema...donde configuro la firma???

David · #20 (**permalink**) 18/09/2008, 09:50

Para eso tendrías que se ejecute el primer setTimeout() para después lanzar nuvamente el otro setTimeout(). Una idea sería guardar en un array los nombres de los divs que quieres mostrar. Luego, tienes una función a la que llamas con el setTimeout(), esa función va recorriendo el array, y va renovando el setTimeout() cada vez que se ejecuta.

P.S.: Panel de Control > Opciones y Configuración > Editar Firma

binagol · #21 (**permalink**) 18/09/2008, 14:46

hasta la idea de guardar en el array te sigo.... no se bien como hacerlo pero te sigo....

respecto a la idea de recorrer el array.... no tengo idea de como empezar....

me tiras una punta????? como hago????

Muchas gracias por la pronta respuesta!!!!!!!!

David · #22 (**permalink**) 18/09/2008, 14:52

Pues supongamos que ya tienes el array, entonces dentro de la función a la que llamas con el setTimeout() puedes tener un contador que vaya incrementándose cada vez que se entra en la función y llamar al índice del array según ese contador.

binagol · #23 (**permalink**) 18/09/2008, 14:59

de casualidad, tenes un ejemplo similar de lo que yo estoy necesitando?????

binagol · #24 (**permalink**) 18/09/2008, 14:59

depaso pregunto, yo quisiera que el div, tenga puntas redondas... alguna idea????

David · #25 (**permalink**) 18/09/2008, 15:01

¿Ya pusiste en un array los ids de los divs a mostrar?. Si así es, ¿podrías poner el código?, así te ayudo a hacer la función para recorrerla.

binagol · #26 (**permalink**) 18/09/2008, 15:05

estaba viendo como armarlo.....

la verdad que.... estoy remando....estoy probando pero no me sale nada desente....

hace como que no.....

binagol · #27 (**permalink**) 18/09/2008, 15:05

esotoy hecho un boludo a cuerda.... no emboco una....

David · #28 (**permalink**) 18/09/2008, 15:14

Por ejemplo, coloca esto al comienzo de la función:

Código javascript:

Ver originalshowdivs = new Array();

Luego, si algo produce error, agrega su id para mostrarlo:

Código javascript:

Ver originalshowdivs[showdivs.length] = 'div_que_produjo_error'

Y luego, en antes del return false colocas:

Código javascript:

Ver originalsetTimeout("contar=0;mostrar()", 1000);

Y finalmente la función que recorre el array:

Código javascript:

Ver originalfunction mostrar() {
document.getElementById(showdivs[contar]).display = "block";
contar += 1;
if (contar < showdivs.length) { setTimeout("mostrar()", 1000) }
}

binagol · #29 (**permalink**) 18/09/2008, 15:21

ok, muchisimas gracias!!!

ya mismo lo implemento

binagol · #30 (**permalink**) 18/09/2008, 15:34

basado en lo que vos dijiste, me queda de la siguiente manera:

Código:

  

<script language="javascript" type="text/javascript">
	
	  function validar(f){
		    nombre = f.nombre.value;
			edad = f.edad.value;
			error_div_nombre = document.getElementById('div_nombre');
			error_div_edad = document.getElementById('div_edad');
			document.getElementById('div_envio').style.display = 'none';
			showdivs = new Array();
			fallo_validar = false;

  		    if (nombre==""){
  			  showdivs[showdivs.length] = 'error_div_nombre'
			  f.nombre.focus(); 
			  fallo_validar = true;
			}else{
			error_div_nombre.style.display = 'none';
			}
			
			if (edad==""){
   			  showdivs[showdivs.length] = 'error_div_edad'
			  f.edad.focus(); 
			  fallo_validar = true;		 
			}else{
			error_div_edad.style.display = 'none';
			}
	
			if (fallo_validar==true)
			  setTimeout("contar=0;mostrar()", 1000);
			  return false;
			else
			  return true;
						  
		}
		
	function mostrar() {
        document.getElementById(showdivs[contar]).display = "block";
        contar += 1;
        if (contar < showdivs.length) { setTimeout("mostrar()", 1000) }
    }

eso es correcto?? por algo no me funciona......