Foros del Web » Programando para Internet » Javascript »

Problema para validar formulario antes de enviar datos.

 Estas en el tema de Problema para validar formulario antes de enviar datos. en el foro de Javascript en Foros del Web. Hola a todos. Este es mi primer post de ayuda de los que aseguro verán miles. Acabo de descubrir el mundo de programación web y ...
  #1 (permalink)  
Antiguo 25/07/2011, 16:29
 
Fecha de Ingreso: julio-2011
Mensajes: 15
Antigüedad: 13 años, 4 meses
Puntos: 0
Pregunta Problema para validar formulario antes de enviar datos.
Hola a todos. Este es mi primer post de ayuda de los que aseguro verán miles. Acabo de descubrir el mundo de programación web y me encantó.
Pero, llegó mi primer problema. Tengo un simple formulario el cual esta válidado con Javascript.

Código HTML:

<script>

function valida()

{ 

	if(document.form.nombre.value.length ==0) 

	{

		alert ("Ingrese un Nombre"); 

		document.form.nombre.focus();

		return false;

	} 

	

	if(isNaN(document.form.nombre.value)) 

	{ 

 	} 

  	else { 

	alert ("Ingrese un Nombre correcto"); 

	document.form.nombre.value=""; 

	document.form.nombre.focus();

	return false;

	} 

 	

	if(document.form.apellido.value.length ==0) 

	{

		alert ("Ingrese un Apellido");

		document.form.apellido.focus();

		return false;

	}  

	if(isNaN(document.form.apellido.value)) 

	{ 

 	} 

  	else { 

	alert ("Ingrese un Apellido correcto"); 

	document.form.apellido.value=""; 

	document.form.apellido.focus();

	return false;

	} 

	if(document.form.tel.value.length ==0) 

	{

		alert ("Ingrese un Teléfono"); 

		document.form.tel.focus();

		return false;

	}  

	if(isNaN(document.form.tel.value)) 

	{ 

	alert ("Ingrese un Teléfono correcto"); 

	document.form.tel.value=""; 

	document.form.tel.focus();

	return false;

	}

	if(document.form.comentario.value.length ==0) 

	{

		alert ("Ingrese un Comentario"); 

		document.form.comentario.focus();

		return false;

	}  

	var filter=/^[A-Za-z_.][A-Za-z0-9_.]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/;

	if (filter.test(document.form.email.value))

	{

	return true; 

	}

	else

	{

	alert("Ingrese una dirección de correo válida");

	document.form.email.focus();

	return false;

	}

}

</script>  

</head>

<body>



	<form name="form" action="enviacorreo.php" method="post" onsubmit="return valida(this)"> 

    	<table> 

			<tr>

        		<th colspan="2"> Contacto </th>

            </tr> 

            <tr>

        		<td> Nombre </td>

            	<td> <input  size="15" maxlength="15" type="text"  id="nombre" name="nombre"/> </td>    

			</tr> 

            <tr>

        		<td> Apellido </td>

            	<td> <input  size="15" maxlength="15" type="text" id="apellido" name="apellido" /> </td>    

			</tr> 

             <tr>

        		<td> E-mail </td>

            	<td> <input  size="15" maxlength="25" type="text" id="email" name="email" /> </td>    

			</tr>   

             <tr>

        		<td> Teléfono </td>

            	<td> <input  size="15" maxlength="15" type="text" id="tel" name="tel" /> </td>    

			</tr> 

             <tr>

        		<td> Comentarios </td>

            	<td> 	

                	<textarea name="comentario" cols="45" tows="5"></textarea>

                </td>    

			</tr>  

            <tr>

        		<td colspan="2" align="center">	

                	<input type="button" value="Confirma" id="boton" name="boton" onclick="valida(), document.form.submit();" />

                </td>    

			</tr> 

    </table>

	</form> 

</body>
Y quiero que antes de hacer el submit, verifique los datos y si los datos no son correctos no se ejecute el submit
Sé que existe un atributo que es onsubmit pero no he logrado hacer que funcione.

El codigo de enviacorreo.php es el siguiente:

Código PHP:

<?  

//Recepción de datos 
$nombre=$_POST['nombre']; 
$apellido= $_POST['apellido']; 
$tel=$_POST['tel']; 
$email=$_POST['email']; 
$comentario=$_POST['comentario'];  
//Fin de resepción de datos 


//Acción de EnvÃ*o 

$para='[email protected]'; 
$asunto='CONSULTA'; 
$mensaje='Mensaje recibido en www.xxxx.com.ar Datos: 

Nombre:'.$nombre.' 
Apellido: '.apellido.'
Teléfono: '.$tel.'
E-mail: '.$email.'
Comentario: '.$comentario.'
'; 
$desde='From:  xxxx <[email protected]>';

mail($para,$asunto,$mensaje,$desde); 
echo 'Se ha enviado correctamente el mensaje';

?>
  #2 (permalink)  
Antiguo 25/07/2011, 16:54
Avatar de goteen_mx  
Fecha de Ingreso: abril-2005
Ubicación: D.F.
Mensajes: 403
Antigüedad: 19 años, 7 meses
Puntos: 37
Respuesta: Problema para validar formulario antes de enviar datos.
No revisé todas tus validaciones, pero así de primera vista te falta un return true al final.

saludos.
__________________
Born to be free.
  #3 (permalink)  
Antiguo 25/07/2011, 17:10
 
Fecha de Ingreso: julio-2011
Mensajes: 15
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problema para validar formulario antes de enviar datos.
Gracias por la respuesta. Puse el return true y no funciona ... Estando todos los campos vacios se envia igual.
  #4 (permalink)  
Antiguo 25/07/2011, 18:53
Avatar de goteen_mx  
Fecha de Ingreso: abril-2005
Ubicación: D.F.
Mensajes: 403
Antigüedad: 19 años, 7 meses
Puntos: 37
Respuesta: Problema para validar formulario antes de enviar datos.
Este funciona con todas las validaciones excepto la de correo electrónico, que no estoy seguro que este correcta la expresion regular.

Tambien le cambie el nombre a la forma.

Saludos.

Código Javascript: 
Ver original
  1. function valida(){ 
  2.     if(document.frm1.nombre.value.length ==0){
  3.         alert ("Ingrese un Nombre"); 
  4.         document.frm1.nombre.focus();
  5.         return false;
  6.     } 
  7.     if(!isNaN(document.frm1.nombre.value)){
  8.         alert ("Ingrese un Nombre correcto"); 
  9.         document.frm1.nombre.value=""; 
  10.         document.frm1.nombre.focus();
  11.         return false;
  12.     } 
  13.     if(!document.frm1.apellido.value.length ==0){
  14.         alert ("Ingrese un Apellido");
  15.         document.frm1.apellido.focus();
  16.         return false;
  17.     }  
  18.     if(!isNaN(document.frm1.apellido.value)){ 
  19.         alert ("Ingrese un Apellido correcto"); 
  20.         document.frm1.apellido.value=""; 
  21.         document.frm1.apellido.focus();
  22.         return false;
  23.     } 
  24.     if(document.frm1.tel.value.length ==0){
  25.         alert ("Ingrese un Teléfono"); 
  26.         document.frm1.tel.focus();
  27.         return false;
  28.     }  
  29.     if(isNaN(document.frm1.tel.value)){ 
  30.         alert ("Ingrese un Teléfono correcto"); 
  31.         document.frm1.tel.value=""; 
  32.         document.frm1.tel.focus();
  33.         return false;
  34.     }
  35.     if(document.frm1.comentario.value.length ==0){
  36.         alert ("Ingrese un Comentario"); 
  37.         document.frm1.comentario.focus();
  38.         return false;
  39.     }  
  40. /*
  41.     var filter=/^[A-Za-z_.][A-Za-z0-9_.]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/;
  42.     if (!filter.test(document.frm1.email.value)){
  43.         alert("Ingrese una dirección de correo válida");
  44.         document.frm1.email.focus();
  45.         return false;
  46.     }*/
  47.     return true;
  48. }
__________________
Born to be free.
  #5 (permalink)  
Antiguo 25/07/2011, 19:14
 
Fecha de Ingreso: julio-2011
Mensajes: 15
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problema para validar formulario antes de enviar datos.
Muchas gracias goteen_mx !! copié el codigo tal cual, cambié el name de mi formulario pero sigue pasando lo mismo. Con todos los datos en blanco se manda igual.

Creo que el error esta en el codigo HTML del formulario en la parte del onsubmit o del onclick del boton ...

Código Javascript: 
Ver original
  1. <form name="frm1" action="enviacorreo.php" method="post" onsubmit="return valida()"> 
  2.  
  3.         <table> 
  4.  
  5.             <tr>
  6.  
  7.                 <th colspan="2"> Contacto </th>
  8.  
  9.             </tr> 
  10.  
  11.             <tr>
  12.  
  13.                 <td> Nombre </td>
  14.  
  15.                 <td> <input  size="15" maxlength="15" type="text"  id="nombre" name="nombre"/> </td>    
  16.  
  17.             </tr> 
  18.  
  19.             <tr>
  20.  
  21.                 <td> Apellido </td>
  22.  
  23.                 <td> <input  size="15" maxlength="15" type="text" id="apellido" name="apellido" /> </td>    
  24.  
  25.             </tr> 
  26.  
  27.              <tr>
  28.  
  29.                 <td> E-mail </td>
  30.  
  31.                 <td> <input  size="15" maxlength="25" type="text" id="email" name="email" /> </td>    
  32.  
  33.             </tr>   
  34.  
  35.              <tr>
  36.  
  37.                 <td> Teléfono </td>
  38.  
  39.                 <td> <input  size="15" maxlength="15" type="text" id="tel" name="tel" /> </td>    
  40.  
  41.             </tr> 
  42.  
  43.              <tr>
  44.  
  45.                 <td> Comentarios </td>
  46.  
  47.                 <td>    
  48.  
  49.                     <textarea name="comentario" cols="45" tows="5"></textarea>
  50.  
  51.                 </td>    
  52.  
  53.             </tr>  
  54.  
  55.             <tr>
  56.  
  57.                 <td colspan="2" align="center"> 
  58.  
  59.                     <input type="button" value="Confirma" id="boton" name="boton" onclick=" document.frm1.submit();" />
  60.  
  61.                 </td>    
  62.  
  63.             </tr> 
  64.  
  65.     </table>
  66.  
  67.     </form>
  #6 (permalink)  
Antiguo 25/07/2011, 19:53
Avatar de goteen_mx  
Fecha de Ingreso: abril-2005
Ubicación: D.F.
Mensajes: 403
Antigüedad: 19 años, 7 meses
Puntos: 37
Respuesta: Problema para validar formulario antes de enviar datos.
Cambia esto

<input type="button" value="Confirma" id="boton" name="boton" onclick=" document.frm1.submit();" />

por

<input type="submit" value="Confirma" />

Saludos
__________________
Born to be free.
  #7 (permalink)  
Antiguo 26/07/2011, 08:44
 
Fecha de Ingreso: julio-2011
Mensajes: 15
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Problema para validar formulario antes de enviar datos.
Listo funciona de maravillas. Muchas gracias

Etiquetas: formulario
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:31.