Validacion de formulario con javascript

Iniciado por Sistematic, 15 Agosto 2014, 18:15 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Sistematic

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 (html4strict) [Seleccionar]

<!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>
   
         <link href="Aviso.css" rel="stylesheet" type="text/css" media="screen" />

<form id="form1" name="form1" method="post"action="finalizarpedido.php" >
            <div align="center">
                <br /><br />
</table>
                <p>&nbsp;</p>
                <table width="615" border="1">
                    <tr>
                        <td colspan="2"><h2><strong>Por favor ingresa estos datos para poder enviarte el producto </strong></h2></td>
                    </tr>
                    <tr>
                        <td colspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                        <td width="270"><h2><strong>(*) Nombre Completo: </strong></h2></td>
                        <td width="329"><label for="nomcompleto"></label>
                            <input name="nomcompleto" type="text" id="nomcompleto" size="50" />
                           <label class = "aviso">*Debe ingresar su nombre</label>
                            </td>
                    </tr>
                    <tr>
                        <td><h1><strong>(*) Calle:</strong></h1></td>
                        <td><label for="calle"></label>
                            <input name="calle" type="text" id="calle" size="30" />
                            <label class = "aviso">*Debe ingresar su calle</label>
                        </td>
                           
                    </tr>
                    <tr>
                        <td><h1><strong>(*) Numero:</strong></h1></td>
                        <td><label for="numcalle"></label>
                            <input name="numcalle" type="text" id="numcalle" size="10" />
                            <label class = "aviso">*Debe ingresar su numero de calle</label>
                        </td>
                    </tr>

<script language="javascript" src="ValidacionJS.js"></script>



Aviso.Css
Código (css) [Seleccionar]

.aviso{
        display: none;
        color: red;
    }



Validacion.Js
Código (javascript) [Seleccionar]

var formulario = document.getElementById("form1"), //El formulario
        elementos = formulario.elements; //Sus elementos
        avisos = document.getElementsByClassName("aviso"); //Las etiquetas
        total = elementos.length; //El total de elementos del fomurlario
       
    formulario.addEventListener("submit", function(event){
        event.preventDefault();
        var valido = true;
     
        for (var i = 0; i < total; i++){
            if (!elementos[i].value.length){
                avisos[i].style.display = "inline-block";
               
                valido = false;
            }
            else{
                avisos[i].style.display = "none";
             
            }
        }
       
        if (valido){
           
            this.submit();
        }
    }, false);


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 cada dificultad yace un verdadero potencial de crecimiento

MinusFour

#1
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.

Sistematic

#2
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 cada dificultad yace un verdadero potencial de crecimiento

JorgeEMX

#3
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 (javascript) [Seleccionar]

   var formulario = document.getElementById("form1"), //El formulario
       elementos = formulario.elements; //Sus elementos
       avisos = document.getElementsByClassName("aviso"); //Las etiquetas
       total = elementos.length; //El total de elementos del fomurlario

   formulario.addEventListener("submit", function(event){
       event.preventDefault();
       var valido = true;

       for (var i = 0; i < total; i++){
           if(elementos[i].type != "submit")
           {
               if (!elementos[i].value.length){
                   avisos[i].style.display = "inline-block";
   
                   valido = false;
               }
               else{
                   avisos[i].style.display = "none";
   
               }
           }
       }
       
       if (valido){

           this.submit();
       }
   }, false);


Y yo pondría valido a false como primer instancia.. pero eso es otro tema.

Sistematic

#4
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 (html4strict) [Seleccionar]
<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 cada dificultad yace un verdadero potencial de crecimiento

JorgeEMX

#5
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 (html4strict) [Seleccionar]
<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 (html4strict) [Seleccionar]

<input type="submit" name="enviar" value="enviar" />


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.

Sistematic

#6
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 (html4strict) [Seleccionar]

<input type="submit" name="confirmar pedido" id="confirmarpedido" value="Comprar"/>


Este boton un renglon antes de
Código (html4strict) [Seleccionar]
<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 cada dificultad yace un verdadero potencial de crecimiento

JorgeEMX

#7
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 (javascript) [Seleccionar]
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.

MinusFour

#8
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.

Sistematic

#9
18 Agosto 2014, 02:49 AM Ultima modificación: 18 Agosto 2014, 02:53 AM por Sistematic
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 (html4strict) [Seleccionar]
event.preventDefault();
(en mi post anterior se puede ver que estaba en otra posición)

Quedandome así el archivo JS

Código (javascript) [Seleccionar]

var formulario = document.getElementById("form1"), //El formulario
       elementos = formulario.elements; //Sus elementos
       avisos = document.getElementsByClassName("aviso"); //Las etiquetas
       total = elementos.length; //El total de elementos del fomurlario
     
   formulario.addEventListener("submit", function(event){
     
       var valido = true;
     
       for (var i = 0; i < total; i++){
           if (!elementos[i].value.length && elementos[i].type != "submit"){
               avisos[i].style.display = "inline-block";
           
               valido = false;
               event.preventDefault();
     
           }
           else{
               avisos[i].style.display = "none";
           
               valido = true;
           }
       }
     
       if (valido){
           
           
           this.submit();
       }
   }, false);


Por lo que veran los cambios que hice fu que le coloque el
Código (javascript) [Seleccionar]
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 (javascript) [Seleccionar]
else{
               avisos[i].style.display = "none";
             
               valido = true;
           }
Bueno como siempre agradecido por dedicar sus tiempos a tratar de ayudar, todo sirve, asi que muchisimas gracias  ;D
Tema Solucionado  ::)
Saludos!
En cada dificultad yace un verdadero potencial de crecimiento
Imprimir
Ir Arriba Páginas1
Acciones del Usuario