Ir al contenido


Foto

Validar formularios dinamicos


  • Por favor identifícate para responder
12 respuestas en este tema

#1 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 27 agosto 2012 - 11:21

Hola!!!

He estado trabajando una aplicacación con php y javascript, pero me encontre con un problema.

El problema es que no puedo validar formularios dinamicos.

Este es un ejemplo de formulario dinamico.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.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&iacute;tulo</title>
<script type="text/javascript" language="javascript">
    function validar()
    {
        /*
        Validar el formulario de las cajas de text
        **/
    }
</script>
</head>

<body>
    <form>
    <?php for ($i=0; $i<10;$i  ){?>
    <input name="caja<?php echo $i; ?>" type="text"> <br/>
        <?php } ?>
        <input name="Enviar" value="Enviar" type="button" title="Enviar" onclick="validar();">
        </form>
</body>
</html>


Las cajas de textos van creciendo conforme el ciclo, pero al momento de validar en javascript no puedo validarlo porque no conosco la cantidad de cajas que me crea. En este ejemplo si se conoce la cantidad, pero si fuera el caso de que los datos fueran tomados de uan base de datos las cajas crecerian mucho mas (por ejemplo) y seria muy dificil de validarlo de forma estatica.

Quisiera saber si alguien me puede ayudar con este problema. Le estaré agradecido.


  • 0

#2 cadetill

cadetill

    Advanced Member

  • Moderadores
  • PipPipPip
  • 994 mensajes
  • LocationEspaña

Escrito 27 agosto 2012 - 12:18

Buenas,

Yo no se casi JS, pero imagino que habrá alguna manera de recorrer todos los elementos de un formulario. Si la hay, mirando el tipo de elemento ya podrías validarlo.

No obstante, si nadie puede ayudarte por ese lado, la "chapuza" que se me ocurre es que, como en php sabrás la cantidad de elementos, crees un elemento hidden con la cantidad de inputs del formulario. Luego desde JS lees el valor de ese hidden (cosa sencilla) y ya puedes hacer la iteración para la validación

Espero haberte ayudado

Nos leemos

  • 0

#3 cadetill

cadetill

    Advanced Member

  • Moderadores
  • PipPipPip
  • 994 mensajes
  • LocationEspaña

Escrito 27 agosto 2012 - 12:23

Buenas de nuevo,

Mira, he encontrado cómo saber la cantidad de elementos de un formulario http://www.w3schools...form_length.asp

Ahora sólo te queda iterar por los elementos del mismo y hacer las comprobaciones pertinentes.

Espero te sirva

Nos leemos

  • 0

#4 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 27 agosto 2012 - 02:00

El problema es que me cuenta todos los objetos dentro del formulario y luego no se como identificar cada uno de los objetos que se encuentran dentro del formulario...
  • 0

#5 cadetill

cadetill

    Advanced Member

  • Moderadores
  • PipPipPip
  • 994 mensajes
  • LocationEspaña

Escrito 27 agosto 2012 - 02:09

Buenas,

Una simple consulta al maestro Google me ha llevado a este enlace http://stackoverflow...an-html-element

Imagino que con eso tendrás la respuesta a lo que buscas ;)

Nos leemos
  • 0

#6 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 27 agosto 2012 - 02:15

pero eso solo se refiere a un objeto. No a varios objetos que se forman de manera dinamica... Y lo que quiero es validar varios objetos que se formaron de forma dinamica... Y esto me fuerza a realizar un codigo en javascript que tambien cree los mismos objetos que estan en HTML en javascript
  • 0

#7 cadetill

cadetill

    Advanced Member

  • Moderadores
  • PipPipPip
  • 994 mensajes
  • LocationEspaña

Escrito 27 agosto 2012 - 02:34

A ver. O no te sigo o no has mirado los enlaces que te he puesto con cariño.

La idea es poder recorrer los elementos de un form creado dinámicamente y, en el caso de que sea un INPUT (por poner un ejemplo), realizar algún tipo de control. ¿Correcto? Pues bien, siguiendo lo indicado en las dos páginas que te he pasado he hecho este ejemplo:

[html5]<html>
<body>

<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname" value="Donald" /><br />
Last name: <input type="text" name="lname" value="Duck" /><br />
<input type="submit" value="Submit" />
</form>

<script>
  for (i=0;i<document.getElementById("frm1").length;i  )
    if (document.getElementById("frm1")[i].nodeName == 'INPUT')
      document.write(document.getElementById("frm1")[i].name  '<br>');
</script>

</body>
</html> [/html5]

Como verás aquí sólo hay 2 INPUTS, pero la idea es la misma haya 2 que 50, el bucle los recorre todos y, en lugar de un write puedes hacer la comprovación que precises.

Nos leemos

  • 0

#8 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 27 agosto 2012 - 08:04

Estuve probando y todavia no me funciona... Me disculpan si no les entiendo, pero no conozco mucho de javascript... Por es que les estoy pidiendo ayuda...
  • 0

#9 cadetill

cadetill

    Advanced Member

  • Moderadores
  • PipPipPip
  • 994 mensajes
  • LocationEspaña

Escrito 27 agosto 2012 - 11:56

Y qué es lo que no te funciona? Qué código estás usando ahora? Qué tipo de validación quieres hacer?

Ayúdanos a ayudarte ;)

PD: recuerda que yo tampoco soy programador de JS
  • 0

#10 luis5636

luis5636

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 28 agosto 2012 - 10:52

Intente hacer lo que me habias propuesto. Pero al momento de implementarlo no hace la función que yo quiero.
Lo que yo quiero hacer es tener un boton que al momento que que se de clic por el metodo onClick se dirija a la función validar del javascript (Pero que se dirija hasta que yo de clic en el boton).
Yo tenia este codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.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&iacute;tulo</title>
<script type="text/javascript" language="javascript">
    function validar()
    {
        /*
        Validar el formulario de las cajas de text
        **/
var form= document.form;
    for (var i=0; i<form.contador.value; i  )
        {
            if (form.caja [i].value==0)
            {
                    alert("Usted no ha introducido ningun dato en las caja de texto, es necesario que introdusca los datos correspondiente");
                    form.caja [i].value="";
                    form.caja [i].focus();
                    return false;
            }
            form.submit();
        }
    }
</script>
</head>

<body>
    <form>
    <?php for ($i=0; $i<10;$i  ){?>
    <input name="caja<?php echo $i; ?>" type="text"> <br/>
        <?php }
        $contador = $contador  1; 
        ?>
        <input type="hidden" name="contador" value="<?php echo $contador; ?>">
        <input name="Enviar" value="Enviar" type="button" title="Enviar" onclick="validar();">
        </form>
</body>
</html>

Pensaba que concatenando el nombre que se forma en el HTML con un ciclo como lo hago arriba, resultaria, pero al momento de probarlo no resulta.. y su mando un alert del valor: form.caja [i].value me manda algo como esto:

NaN, ese es el unico resultado que me da, esto significa que no esta devolviendo el resultado que se encuentra dentro del input text.

He leido, buscado, pero no sale mucho.

Probe uno que estaba hacerca del input check y tampoco funciona...

Espero que me entiendas, para ver si le allas solucion. Y te estare agradecido....
  • 0

#11 cadetill

cadetill

    Advanced Member

  • Moderadores
  • PipPipPip
  • 994 mensajes
  • LocationEspaña

Escrito 28 agosto 2012 - 12:10

Buenas,

Fíjate que no haces lo que te puse en mi último (bueno, penúltimo) mensaje, estás intentando hacer lo del "contador". No obstante, no es éste el problema real que tienes, sino el desconocimiento de JavaScript/HTML.

La declaración del form la tienes incompleta. Por un lado te falta la acción y por otro un identificador (que te servirá para que JS pueda identificar y localizar el elemento). Algo así:

[html5]<form id="MiForm" action="una_pagina.php">[/html5]

Una vez identificado el formulario, desde JS ya puedes localizarlo con la función getElementById

[js]var form = document.getElementById("MiForm");[/js]

Y ahora ya sí puedes acceder a su length y a sus elementos

[js]  for (i=0; i<form.length; i++)
  if (form[i].nodeName == 'INPUT')
    if (form[i].value == 0)
    ........
[/js]

Y sobre todo, sólo hacer un submit, es decir, tiene que ir fuera del bucle, no dentro.
Así pues, tu función JS puede ser algo así

[js]  function validar() {
    var form = document.getElementById("MiForm");
    for (i=0; i<form.length; i++) {
      if (form[i].nodeName == 'INPUT')
        if (form[i].value == 0) {
          alert("Usted no ha introducido ningun dato en las caja de texto, es necesario que introdusca los datos correspondiente");
          form[i].value="";
          form[i].focus();
          return false;
        }
    }
    form.submit();
  }
[/js]

Espero te sirva

Nos leemos

PD: todo hecho sin probarlo, así que a lo mejor hay algún error :p
  • 0

#12 enecumene

enecumene

    Webmaster

  • Administrador
  • 7.419 mensajes
  • LocationRepública Dominicana

Escrito 28 agosto 2012 - 12:21

[js]<script language="javascript">
function ValidaCampo(campo)
{
  inputs = document.getElementsByTagName("input");
  for (i=0; i<inputs.length; i  )
  {
    if (inputs.name == "caja[i]")
    {
      //aqui validas
    }
  }
}
</script>[/js]

Saludos.
  • 0

#13 cadetill

cadetill

    Advanced Member

  • Moderadores
  • PipPipPip
  • 994 mensajes
  • LocationEspaña

Escrito 28 agosto 2012 - 12:30

[js]<script language="javascript">
function ValidaCampo(campo)
{
  inputs = document.getElementsByTagName("input");
  for (i=0; i<inputs.length; i  )
  {
    if (inputs.name == "caja[i]")
    {
      //aqui validas
    }
  }
}
</script>[/js]

Saludos.


Ya decía yo que el JS tampoco es lo mio :D
  • 0




IP.Board spam blocked by CleanTalk.