Foros del Web » Programando para Internet » Javascript »

validar campos antes de enviar

Estas en el tema de validar campos antes de enviar en el foro de Javascript en Foros del Web. Buenas; Tengo un formulario de contacto en la web, actualmente lo que hace es que lo rellenas (o no), le das a enviar, te sale ...
  #1 (permalink)  
Antiguo 15/11/2010, 14:07
 
Fecha de Ingreso: noviembre-2010
Mensajes: 18
Antigüedad: 10 años, 6 meses
Puntos: 0
validar campos antes de enviar

Buenas;

Tengo un formulario de contacto en la web, actualmente lo que hace es que lo rellenas (o no), le das a enviar, te sale un cuadro diciendo que se ha enviado correctamente y vuelve a mostrar la pagina del formulario.

Esto me lo hace correctamente, pero cuando intento meter funciones para que me compruebe que se han rellenado 2 campos (nombre y telefono), me empieza a hacer locuras jejeje, es decir, consegui que se muestre una ventana cuando no hay nada en ellos y se le da a enviar, pero igualmente lo envia, asi que he borrado las modificaciones y os pego aqui el codigo de lo que tengo funcionando ahora mismo.

codigo del contacto.html:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contacto</title>

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFF;
	background-image: url();
	background-repeat: repeat-x;
}
.centrado {
	position: absolute;
	top: 50%; 
                left: 50%;
	height: 600px;
	width: 800px;
 	margin-top: -300px;
 	margin-left: -400px;
}

#formulario {
	position:absolute;
	width:311px;
	height:298px;
	z-index:1;
	left: 409px;
	top: 166px;
}
</style>
</head>

<body>
	
    <div class="centrado" id="contenedor">
      <div id="formulario">
        <form id="form1" name="form1" method="post" action="send.php"> 
            <label for="nombre"><img src="../../imagenes/compartir2.jpg" width="94" height="21" /></label>
            <input name="nombre" type="text" id="nombre" maxlength="40" />
          <p>
            <label for="telefono"><img src="../../imagenes/compartir2.jpg" width="94" height="21" /></label>
            <input name="telefono" type="text" id="telefono" maxlength="9" />
          </p>
          <p>
            <label for="email"><img src="../../imagenes/compartir2.jpg" width="94" height="21" /></label>
            <input name="email" type="text" id="email" maxlength="50" />
          </p>
          <p>
            <label for="mensaje"><img src="../../imagenes/compartir2.jpg" width="94" height="21" /></label>
            <textarea name="mensaje" id="mensaje" cols="41" rows="5"></textarea>
          </p>
          <p>
            <label for="enviar"><img src="../../imagenes/compartir2.jpg" width="94" height="21" /></label>
            <input type="submit" name="enviar" id="enviar" value="Enviar"/>
          </p>
        </form>
      
      </div>
    
    </div>
    
</body>
</html>

Codigo del send.php:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript">
	window.alert("El mensaje ha sido enviado. Gracias."); /*Pop up que da el ok de mensaje enviado*/ 
</script> 

<script type="text/javascript">
  	window.history.go(-1)          /*Volvemos a la pagina del formulario de envio*/
</script> 

</head>

<body>

<?php 
$nombre = $_POST['nombre'];
$telefono=$_POST['telefono'];
$email = $_POST['email'];

$header = 'From: ' . $email . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

$mensaje = "Este mensaje fue enviado por " . $nombre . " \r\n";
$mensaje .= "Su telefono es: " . $telefono . " \r\n";
$mensaje .= "Su e-mail es: " . $email . " \r\n";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " \r\n";
$mensaje .= "Enviado el " . date('d/m/Y', time());

$para = '[email protected]';
$asunto = 'AVISO DE LA WEB PCATOPE.ES';

mail($para, $asunto, utf8_decode($mensaje), $header);
?>

</body>
</html>
No se si todo vendra porque tenga mal situadas las funciones del php, la de abrir el popup de mensaje enviado y la de volver a la pagina del formulario...

¿Que puedo hacer para comprobar que en los campos nombre y telefono hay algo antes de enviar y decirle al usuario que los llene y sea entonces cuando los rellene, le de a enviar, salga la ventana de que se ha enviado y vuelva a la pagina del formulario? Llevo toda la tarde desde las 5 intentandolo, leyendo mil posts del foro y nada, no lo consigo...

Muchas gracias y un saludo!!
  #2 (permalink)  
Antiguo 15/11/2010, 14:19
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 12 años, 10 meses
Puntos: 1011
Respuesta: validar campos antes de enviar

la validación del formulario ha de ser en contacto.html. a la etiqueta form le añades esto onsubmit="return funcion(this);". donde funcion() es el nombre del método que usarás para validar los campos. ahora en la función haces las condicionales
  #3 (permalink)  
Antiguo 15/11/2010, 15:07
 
Fecha de Ingreso: noviembre-2010
Mensajes: 18
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: validar campos antes de enviar

Cita:
Iniciado por IsaBelM Ver Mensaje
la validación del formulario ha de ser en contacto.html. a la etiqueta form le añades esto onsubmit="return funcion(this);". donde funcion() es el nombre del método que usarás para validar los campos. ahora en la función haces las condicionales
Jó, eso es lo que intento pero nada, mira, en el head de contacto.html he añadido esto:

Código:
<script type="text/javascript">
  	function validar() { 
		if(form1.nombre == "") { alert('Debes poner el nombre') ; return false ; } 
		if(form1.telefono == "") { alert('Debes poner el telefono') ; return false ; } 
		} 
</script>

y luego en el body en la etiqueta form:

Código:
 <form id="form1" name="form1" method="post" action="send.php" onsubmit="return validar(this);">

Pero nada, sigue igual, dejo todos los campos vacios, le doy a enviar y me sale simplemente el popup de enviado y el correo me llega.

¿Que puedo hacer? Ando un tanto desquiciado

Saludos y muchas gracias!
  #4 (permalink)  
Antiguo 15/11/2010, 15:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 12 años, 10 meses
Puntos: 1011
Respuesta: validar campos antes de enviar

fíjate que se recoge la variable this y después la usas en la validación
Cita:
function validar(frm) {
if(frm.nombre == "") { alert('Debes poner el nombre') ; return false ; }
if(frm.telefono == "") { alert('Debes poner el telefono') ; return false ; } else {return true;}
}
  #5 (permalink)  
Antiguo 15/11/2010, 16:06
 
Fecha de Ingreso: noviembre-2010
Mensajes: 18
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: validar campos antes de enviar

Cita:
Iniciado por IsaBelM Ver Mensaje
fíjate que se recoge la variable this y después la usas en la validación
A ver si me aclaro, segun lo que entiendo si pongo esto:

Código:
<script type="text/javascript">
  	function validar(frm) { 
		if(form1.nombre == "") { alert('Debes poner el nombre') ; return false ; } 
		if(form1.telefono == "") { alert('Debes poner el telefono') ; return false ; } 
		else {return true;}
		} 
</script>
lo que pasa es que la variable "frm" tomará el valor false si el campo está vacio y el valor true si tiene algo, le pasará este valor a "validar(this)" en esta parte:

Código:
 <form id="form1" name="form1" method="post" action="send.php" onsubmit="return validar(this);">
y entonces si en ese momento la función tiene el valor false mostrará el alert que corresponda, y si tiene true me saldrá el popup de enviado correctamente y volverá a la pagina del formulario.

Pero el caso es que pongo eso y no pasa nada, es como si no lo hubiera puesto, ¿que puede pasar?

Saludos y gracias!!!
  #6 (permalink)  
Antiguo 15/11/2010, 16:13
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 12 años, 10 meses
Puntos: 1011
Respuesta: validar campos antes de enviar

fíjate que yo no he puesto form1 sino frm
Cita:
if(frm.nombre == "") { alert('Debes poner el nombre') ; return false ; }
if(frm.telefono == "") { alert('Debes poner el telefono') ; return false ; } else {return true;}
para el caso es lo mismo, siempre y cuando coincida el nombre del argumento con el nombre que usas en la validación
  #7 (permalink)  
Antiguo 15/11/2010, 16:30
 
Fecha de Ingreso: noviembre-2010
Mensajes: 18
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: validar campos antes de enviar

Cita:
Iniciado por IsaBelM Ver Mensaje
fíjate que yo no he puesto form1 sino frm

para el caso es lo mismo, siempre y cuando coincida el nombre del argumento con el nombre que usas en la validación
Esto es lo que he puesto:

Código:
<script type="text/javascript">
  	function validar(form1) { 
		if(form1.nombre == "") { alert('Debes poner el nombre') ; return false ; } 
		if(form1.telefono == "") { alert('Debes poner el telefono') ; return false ; } 
		else {return true;}
		} 
</script>

pero no funciona... ¿puede tener algo que ver las funciones que tengo en el php para mostrar el popup de confirmacion de envio y de volver a la pagina de formulario?
  #8 (permalink)  
Antiguo 15/11/2010, 16:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 12 años, 10 meses
Puntos: 1011
Respuesta: validar campos antes de enviar

si es que te falta asignarle el atributo value en la validación
  #9 (permalink)  
Antiguo 15/11/2010, 17:00
 
Fecha de Ingreso: noviembre-2010
Mensajes: 18
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: validar campos antes de enviar

Cita:
Iniciado por IsaBelM Ver Mensaje
si es que te falta asignarle el atributo value en la validación
No se donde incluir el atributo, perdona mi ignorancia ¿podrias explicarme un poco mas por favor?

Muchas gracias y un saludo!
  #10 (permalink)  
Antiguo 15/11/2010, 17:06
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 12 años, 10 meses
Puntos: 1011
Respuesta: validar campos antes de enviar

para recoger el valor de un campo, tienes que usar la propiedad, no atributo, value
Cita:
if(form1.nombre.value == "")
if(form1.telefono.value == "")
  #11 (permalink)  
Antiguo 15/11/2010, 17:25
 
Fecha de Ingreso: noviembre-2010
Mensajes: 18
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: validar campos antes de enviar

Cita:
Iniciado por IsaBelM Ver Mensaje
para recoger el valor de un campo, tienes que usar la propiedad, no atributo, value
Me acabas de salvar la vida, llevaba tooooda la tarde con esto...

Muchisimas gracias, me has sido de gran ayuda!

Etiquetas: campos, enviar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:03.