Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Sistematic en 15 Agosto 2014, 18:15 pm


Título: Validacion de formulario con javascript
Publicado por: Sistematic 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

Título: Re: Validacion de formulario con javascript
Publicado por: MinusFour 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.

Título: Re: Validacion de formulario con javascript
Publicado por: Sistematic 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  >:(

Título: Re: Validacion de formulario con javascript
Publicado por: JorgeEMX 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.

Título: Re: Validacion de formulario con javascript
Publicado por: 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

Título: Re: Validacion de formulario con javascript
Publicado por: JorgeEMX 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.

Título: Re: Validacion de formulario con javascript
Publicado por: Sistematic 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?

Título: Re: Validacion de formulario con javascript
Publicado por: JorgeEMX 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.

Título: Re: Validacion de formulario con javascript
Publicado por: MinusFour 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.

Título: Re: Validacion de formulario con javascript
Publicado por: Sistematic 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!


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines