validar en la misma página

estibaliz2006 · #1 (**permalink**) 02/04/2007, 06:25

hola. creo que esto viene aquí, puesto que utilizo para ello javascript. bueno, os cuento. a través de un script, trato de validar campos vacios en un formulario, de tal modo que si el usuario pretende enviar determinados campos sin cumplimentarlos aparece en la pantalla un mensaje de error.
el tema está en que el mensaje de error que aparece viene de la forma Alerta de windows (es decir, el pop up con el mensaje de error que suele dar windows cuando algo no va bien).

yo lo que quiero es que me aparezca el mensaje de error advirtiendo del tema pero en la misma página debajo del campo que va en blanco. es decir, supongamos el campo 'nombre'. pues si el usuario lo deja en blanco, que aparezca el mensaje 'no puede dejar este campo en blanco' por ejemplo, pero debajo de la casilla para meter el campo nombre.

podéis ayudarme?

zyon · #2 (**permalink**) 02/04/2007, 08:00

Que tal, a ver si te sirve este ejemplo!

Código HTML:

<script language="JavaScript">
function valida(){
	if(document.getElementById("nombre").value==''){
		document.getElementById("nombre2").style.visibility='visible';
		return false;
	}else{
		document.getElementById("nombre2").style.visibility='hidden';
	}		
}
</script>
<body>
<form name="form1" method="post" action="">
  <table width="75%" border="0">
    <tr><td>Nombre():</td><td><input type="text" id="nombre" onBlur="valida();"></td></tr>
    <tr><td></td>
      <td id="nombre2" style="visibility:hidden">Campo Nombre Obligatorio.</td>
    </tr>
    <tr><td>Apellidos:</td><td><input type="text" name="textfield2"></td></tr>
    <tr><td></td><td></td></tr>
  </table>
  <input type="button" name="valida	" value="Valida" onClick="valida();">
</form>
</body>

caricatos · #3 (**permalink**) 02/04/2007, 08:36

Hola:

A pesar de ser un buen ejemplo, la forma de validar a mi me parece incorrecta... lo aconsejo constantemente... desde el tag form, con el evento submit (onsubmit) del form, y un botón submit normal (sin usar eventos adicionales...)

<form onsubmit="return validar (this)"...

Hay muchos mensajes sobre este tema, incluso en las FAQs hay un validador genérico muy bueno.

Saludos

zyon · #4 (**permalink**) 02/04/2007, 08:41

jeje esta bien tratare de tenerlo presente, aunque aveces me confundo un poquitin con eso, por que poner en el form la funcion? y el this que envia?

santhy · #5 (**permalink**) 02/04/2007, 09:33

El this envía el objeto Form entero.
Parecido a document.forms['form1'] o document.getElementById('form1') suponiendo que el formulario se llame form1.

No es así?

zyon · #6 (**permalink**) 02/04/2007, 10:13

bueno, creo eso lo entiendo, pero como mando a llamar u obtengo el valor de un objeto en específico, como el de un text? por ejemplo...

caricatos · #7 (**permalink**) 02/04/2007, 10:29

Cita:

Iniciado por zyon

jeje esta bien tratare de tenerlo presente, aunque aveces me confundo un poquitin con eso, por que poner en el form la funcion? y el this que envia?

Hola:

El envío lo hace un botón submit... como si no existiera javascript...

Por eso lo aconsejable es la doble validación... con javascript en el cliente, y en el servidor también validar, pensando que el receptor no tenga habilitado javascript...

This es útil para reutilizar el código, ya que referencia todo el formulario, así que cada campo se referencia a partir de ese this.

En base a tu código, trataré de hacer lo mismo:

function valida(f){
pasa = f.nombre.value != "";
document.getElementById("nombre2").style.visibilit y = (pasa) ? 'hidden':'visible';
return pasa;
}

Claro que el control debe poner name="nombre" (tal como lo tenías no había un control con un campo nombre... con el id no basta

)

Y el formulario:

<form onsubmit="return valida(this)"...

Saludos