elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Validacion de formulario con javascript		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Validacion de formulario con javascript  (Leído 3,550 veces)
Sistematic

Desconectado Desconectado

Mensajes: 16



Ver Perfil
Validacion de formulario con javascript
« en: 15 Agosto 2014, 18:15 pm »
Hola a todos  ;D desde ya muchas gracias por ver que problema tengo  :laugh:
Bueno voy al tema que me preocupa:
Tengo un formulario que se encuentra en un archivo llamado confirmarpedido.php un archivo llamado Aviso.Css y un archivo javascript llamado Validacion.js

confirmarpedido.php : lo uso para cargar los datos que le solicito
Validacion.Js : lo uso para validar
Aviso.Css : lo uso para que el aviso de error me funcione

Aqui los tres archivos

confirmarpedido.php
Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Documento sin título</title>
  6.  
  7.          <link href="Aviso.css" rel="stylesheet" type="text/css" media="screen" />
  8.  
  9. <form id="form1" name="form1" method="post"action="finalizarpedido.php" >
  10.             <div align="center">
  11.                 <br /><br />	
  12.  </table>
  13.                 <p>&nbsp;</p>
  14.                 <table width="615" border="1">
  15.                     <tr>
  16.                         <td colspan="2"><h2><strong>Por favor ingresa estos datos para poder enviarte el producto </strong></h2></td>
  17.                     </tr>
  18.                     <tr>
  19.                         <td colspan="2">&nbsp;</td>
  20.                     </tr>
  21.                     <tr>
  22.                         <td width="270"><h2><strong>(*) Nombre Completo: </strong></h2></td>
  23.                         <td width="329"><label for="nomcompleto"></label>
  24.                             <input name="nomcompleto" type="text" id="nomcompleto" size="50" />
  25.                            <label class = "aviso">*Debe ingresar su nombre</label>
  26.                             </td>
  27.                     </tr>
  28.                     <tr>
  29.                         <td><h1><strong>(*) Calle:</strong></h1></td>
  30.                         <td><label for="calle"></label>
  31.                             <input name="calle" type="text" id="calle" size="30" />
  32.                             <label class = "aviso">*Debe ingresar su calle</label>
  33.                         </td>
  34.  
  35.                     </tr>
  36.                     <tr>
  37.                         <td><h1><strong>(*) Numero:</strong></h1></td>
  38.                         <td><label for="numcalle"></label>
  39.                             <input name="numcalle" type="text" id="numcalle" size="10" />
  40.                             <label class = "aviso">*Debe ingresar su numero de calle</label>
  41.                         </td>
  42.                     </tr>
  43.  
  44. <script language="javascript" src="ValidacionJS.js"></script>
  45.  


Aviso.Css
Código
  1.  .aviso{
  2.         display: none;
  3.         color: red;
  4.     }
  5.  


Validacion.Js
Código
  1. var formulario = document.getElementById("form1"), //El formulario
  2.         elementos = formulario.elements; //Sus elementos
  3.         avisos = document.getElementsByClassName("aviso"); //Las etiquetas
  4.         total = elementos.length; //El total de elementos del fomurlario
  5.  
  6.     formulario.addEventListener("submit", function(event){
  7.         event.preventDefault();
  8.         var valido = true;
  9.  
  10.         for (var i = 0; i < total; i++){
  11.             if (!elementos[i].value.length){
  12.                 avisos[i].style.display = "inline-block";
  13.  
  14.                 valido = false;
  15.             }
  16.             else{
  17.                 avisos[i].style.display = "none";
  18.  
  19.             }
  20.         }
  21.  
  22.         if (valido){
  23.  
  24.             this.submit();
  25.         }
  26.     }, false);
  27.  

El problema de todo esto es que no puedo pasarme al archivo siguiente llamado finalizarpedido.php que se encuentra en el action del formulario  :-(
Aprieto el boton para ir a la pagina siguiente y no hace nada  :(
Alguien que me pueda ayudar por favooooor  :-\ Desde ya muchas gracias  ;D
En línea
En cada dificultad yace un verdadero potencial de crecimiento
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Validacion de formulario con javascript
« Respuesta #1 en: 16 Agosto 2014, 17:21 pm »
¿Puede ser algún otro error de javascript? ¿No te tira ningún error la consola?

También puede ser que uno de tus elementos este vacio de alguna forma y por eso entra al if, así negando la variable valido.

Prueba a poner un console.log("Success"); arriba del this.submit(); para ver si llega a ese punto.
En línea
Sistematic

Desconectado Desconectado

Mensajes: 16



Ver Perfil
Re: Validacion de formulario con javascript
« Respuesta #2 en: 17 Agosto 2014, 04:42 am »
Hola Minus Four Disculpa la tardanza.
Eh probado  lo que me has dicho y solo me da este error pero es solo un error en el aviso que esta en el archivo Css (creo)

TypeError: avisos is undefined
avisos.style.display="none";

Un bajon porque valida mi formulario pero no puedo pasar a otro  >:(
En línea
En cada dificultad yace un verdadero potencial de crecimiento
JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: Validacion de formulario con javascript
« Respuesta #3 en: 17 Agosto 2014, 08:00 am »
Tienes un error en tu JS (aparte de que tu HTML es una porquería en cuanto a estructura):

Código
  1.     var formulario = document.getElementById("form1"), //El formulario
  2.         elementos = formulario.elements; //Sus elementos
  3.         avisos = document.getElementsByClassName("aviso"); //Las etiquetas
  4.         total = elementos.length; //El total de elementos del fomurlario
  5.  
  6.     formulario.addEventListener("submit", function(event){
  7.         event.preventDefault();
  8.         var valido = true;
  9.  
  10.         for (var i = 0; i < total; i++){
  11.             if(elementos[i].type != "submit")
  12.             {
  13.                 if (!elementos[i].value.length){
  14.                     avisos[i].style.display = "inline-block";
  15.  
  16.                     valido = false;
  17.                 }
  18.                 else{
  19.                     avisos[i].style.display = "none";
  20.  
  21.                 }
  22.             }
  23.         }
  24.  
  25.         if (valido){
  26.  
  27.             this.submit();
  28.         }
  29.     }, false);
  30.  

Y yo pondría valido a false como primer instancia.. pero eso es otro tema.
En línea
Siempre hay algo nuevo que aprender
Mi canal de YOUTUBE: https://www.youtube.com/channel/UCt1WPhzdZW7tRTe5I5USkGQ
Sistematic

Desconectado Desconectado

Mensajes: 16



Ver Perfil
Re: Validacion de formulario con javascript
« Respuesta #4 en: 17 Agosto 2014, 15:27 pm »
Muchas gracias JorgeEMX Pero lo que me interesa es pasarme a otro formulario tendrás alguna idea de como hacerlo? ¿que tengo que poner en mi formulario para pasarme a otro? Si bien cuando validaba mi formulario con alert() colocaba en mi formulario
 
Código
  1. <form action="proximapagina.php" onsubmit="return funcionJSQueValida();">
y me pasaba a otra pagina cuando daba true de retorno pero en este caso no se que poner en el formulario  :huh:
Desde ya muchas gracias
En línea
En cada dificultad yace un verdadero potencial de crecimiento
JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: Validacion de formulario con javascript
« Respuesta #5 en: 17 Agosto 2014, 17:54 pm »
Cita de: Sistematic en 17 Agosto 2014, 15:27 pm
Muchas gracias JorgeEMX Pero lo que me interesa es pasarme a otro formulario tendrás alguna idea de como hacerlo? ¿que tengo que poner en mi formulario para pasarme a otro? Si bien cuando validaba mi formulario con alert() colocaba en mi formulario
 
Código
  1. <form action="proximapagina.php" onsubmit="return funcionJSQueValida();">
y me pasaba a otra pagina cuando daba true de retorno pero en este caso no se que poner en el formulario  :huh:
Desde ya muchas gracias

La estructura de tu HTML es correcta, el problema es con JS. Yo no vi ninguna definición de un botón submit en tu form para enviar la información. Sin embargo, al colocarlo el JS arroja un error que no puede acceder a la propiedad style; ya que la definición del botón la coloqué como:

Código
  1. <input type="submit" name="enviar" value="enviar" />
  2.  

En conclusión, el problema está en el JS (ya que a ti en otro post anterior dices que te marca un error que no debería aparecer). Si no sabes "debuguear" JS, hay poco que se pueda hacer.
En línea
Siempre hay algo nuevo que aprender
Mi canal de YOUTUBE: https://www.youtube.com/channel/UCt1WPhzdZW7tRTe5I5USkGQ
Sistematic

Desconectado Desconectado

Mensajes: 16



Ver Perfil
Re: Validacion de formulario con javascript
« Respuesta #6 en: 17 Agosto 2014, 18:37 pm »
Gracias por responder Jorge La verdad es que si... tienes razon en todo lo que dices pero es raro que no me deje pasar a otro formulario si el firebug me dice que hay un error con el tema del aviso creo que no tiene nada que ver con que eso afecte a que no pueda pasar al otro formulario y con respecto al boton si me olvide de colocar y es:
Código
  1. <input type="submit" name="confirmar pedido" id="confirmarpedido" value="Comprar"/>
  2.  

Este boton un renglon antes de
Código
  1. <script languaje="javascript" src="ValidacionJS.js"></script>

¿Si no tuviera errores esa validacion pasaria a la otra pagina sin problemas?¿no hace falta ni un return en el formulario o algo como un onsubmit="return funcionQueValida()" o algo asi?
En línea
En cada dificultad yace un verdadero potencial de crecimiento
JorgeEMX
Ex-Staff
*
Desconectado Desconectado

Mensajes: 2.615



Ver Perfil WWW
Re: Validacion de formulario con javascript
« Respuesta #7 en: 17 Agosto 2014, 19:47 pm »
Cita de: Sistematic en 17 Agosto 2014, 18:37 pm

¿Si no tuviera errores esa validacion pasaria a la otra pagina sin problemas?¿no hace falta ni un return en el formulario o algo como un onsubmit="return funcionQueValida()" o algo asi?


El problema es que si tienes un error en el JS antes de llegar al this.submit() eso ya no se ejecuta. Ya que pones el botón, seguramente es el mismo error que me arrojaba a mi. Es por eso que modifiqué tu JS añadiendo el if:

Código
  1. if(elementos[i].type != "submit")

Ya que tú comparas todos los elementos del formulario (incluyendo el botón de submit) y no todos contienen, en el mismo indice, un label con clase aviso para aplicar mostrar/ocultar.
En línea
Siempre hay algo nuevo que aprender
Mi canal de YOUTUBE: https://www.youtube.com/channel/UCt1WPhzdZW7tRTe5I5USkGQ
MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Validacion de formulario con javascript
« Respuesta #8 en: 17 Agosto 2014, 21:45 pm »
¿El script se ejecuta antes que se cargue el documento? Es probable que no detecte ninguna elemento con esa clase por eso lanza ese error.

Si pones todo dentro de tu función del addEvent, debería funcionar.
En línea
Sistematic

Desconectado Desconectado

Mensajes: 16



Ver Perfil
Re: Validacion de formulario con javascript
« Respuesta #9 en: 18 Agosto 2014, 02:49 am »
Hola nuevamente JorgeEMX y MinusFour Gracias por el apoyo y por tratar de ayudarme recien me puse a ver que onda y a probar varias cosas y sus recomendaciones. El error que me daba (TypeError: avisos is undefined) es porque yo tengo mas elementos de lo que posteé aquí (comboboxes) y como tenia mas elementos en dichos elementos no tenia definido el aviso por eso el error quien como e dicho no afectaba en poder irme en otra pagina  :P lo que me impedía a mi irme a otra pagina era el lugar en donde se encontraba la función

Código
  1. event.preventDefault();
(en mi post anterior se puede ver que estaba en otra posición)

Quedandome así el archivo JS

Código
  1. var formulario = document.getElementById("form1"), //El formulario
  2.         elementos = formulario.elements; //Sus elementos
  3.         avisos = document.getElementsByClassName("aviso"); //Las etiquetas
  4.         total = elementos.length; //El total de elementos del fomurlario
  5.  
  6.     formulario.addEventListener("submit", function(event){
  7.  
  8.         var valido = true;
  9.  
  10.         for (var i = 0; i < total; i++){
  11.             if (!elementos[i].value.length && elementos[i].type != "submit"){
  12.                 avisos[i].style.display = "inline-block";
  13.  
  14.                 valido = false;
  15.                 event.preventDefault();
  16.  
  17.             }
  18.             else{
  19.                 avisos[i].style.display = "none";
  20.  
  21.                 valido = true;
  22.             }
  23.         }
  24.  
  25.         if (valido){
  26.  
  27.  
  28.             this.submit();
  29.         }
  30.     }, false);
  31.  

Por lo que veran los cambios que hice fu que le coloque el
Código
  1. event.preventDefault();
cuando valido era falso y en el else le puse a valido el valor true para que sepa que es verdadero

Código
  1. else{
  2.                 avisos[i].style.display = "none";
  3.  
  4.                 valido = true;
  5.             }
Bueno como siempre agradecido por dedicar sus tiempos a tratar de ayudar, todo sirve, asi que muchisimas gracias  ;D
Tema Solucionado  ::)
Saludos!
« Última modificación: 18 Agosto 2014, 02:53 am por Sistematic » En línea
En cada dificultad yace un verdadero potencial de crecimiento
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Ayuda con validacion de formulario PHP « 1 2 »
PHP 		oscarj24 10 6,151 Último mensaje 10 Junio 2010, 02:51 am
por oscarj24
validacion formulario
Desarrollo Web 		marcelo3d 8 4,919 Último mensaje 2 Noviembre 2011, 17:28 pm
por Mr. Crowley
Problema con la validación de un formulario con javascript
Desarrollo Web 		janisorna 9 5,930 Último mensaje 3 Enero 2012, 20:22 pm
por janisorna
MOVIDO: Problema con la validación de un formulario con javascript
Java 		Leyer 0 1,592 Último mensaje 30 Diciembre 2011, 19:18 pm
por Leyer
[SOURCE] Formulario con validacion javascript de contraseña y email a mysqli
Desarrollo Web 		Graphixx 0 1,624 Último mensaje 29 Agosto 2014, 23:10 pm
por Graphixx
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines