Validar campos de texto de un formulario dinamico

Sabin · #1 (**permalink**) 06/01/2012, 19:19

Buenas me encontraba incursionando en el tema de los formularios dinamicos hasta que al querer validarlos me vi imposibilitado ya que con cada campo de texto que se agrega su nombre varia, es decir en mi caso cada vez que se agrega un campo los nombres se comportan asi:

text1
text2
text3
text..

por lo que no tengo idea de como poder recorrerlos y detectar si alguno esta vacio.

Dejo el codigo:

Código HTML:

<html> 
<head>
<title>Crear input file</title>
<script type="text/javascript">

Código Javascript:

Ver originalnum=0;
function crear(obj) {
  num++;
  document.form1.contador.value = num;
  fi = document.getElementById('fiel'); 
 contenedor = document.createElement('div'); 
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor); 
 
  ele = document.createElement('input'); 
  ele.type = 'text'; 
  ele.name = 'text'+num; 
  contenedor.appendChild(ele); 
  
  ele = document.createElement('input'); 
  ele.type = 'button'; 
  ele.value = 'Borrar'; 
  ele.name = 'div'+num; 
  ele.onclick = function () {borrar(this.name)} 
  contenedor.appendChild(ele); 
}
function borrar(obj) {
  fi = document.getElementById('fiel'); 
  fi.removeChild(document.getElementById(obj));
  num--;
}

Código HTML:

</script>
</head>
<body>
<form name="form1" method="POST" action="lalala.php">
<input type="button" value="Crear" onclick="crear(this)">
<fieldset id="fiel">
</fieldset>
<input type="hidden" name="contador" value="" />
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Enviar">
</form> 
</html>

Si alguien sabe como orientarme desde ya muchas gracias :D

Sabin · #2 (**permalink**) 07/01/2012, 11:51

Bueno hasta ahora logre añadirle una funcion en la cual recorro y recojo el value de todos los campos text creados dinamicamente, el problema ahora es que no sabria crear la condicion de que en el caso de que se envie algun value vacio advierta esta situacion y no envie hasta tener todos completos.

El codigo de la funcion de validacion que tengo hasta el momento:

Código Javascript:

Ver originalfunction verificar()
{
fi = document.getElementById("fiel");
controles = fi.getElementsByTagName('input');
for ( i=0; i<controles.length; i++){
control = controles[i];
if (control.type == 'text'){
    //ACA DEBERIA HACER LA VALIDACION PARA EL CASO QUE SE ENVIE ALGUN CAMPO VACIO
    alert('El valor de '+control.name+' es '+control.value); //Muestro nombres y valores de los campos creados para comprobar que los recorra.
}
}
}

nilburcion · #3 (**permalink**) 07/01/2012, 13:02

Creo que asi te podria funcionar:

Código:

<form name="form1" method="POST" action="lalala.php" onsubmit="return verificar()">

Código Javascript:

Ver originalfunction verificar()
{
var rellenados=true;
fi = document.getElementById("fiel");
controles = fi.getElementsByTagName('input');
for ( i=0; i<controles.length; i++){
control = controles[i];
if (control.type == 'text'){
if (control.value=="") {
rellenados=false;
}
}
}
return rellenados;
}

Sabin · #4 (**permalink**) 07/01/2012, 13:35

Perfecto! Ya solo envia los datos si ningun campo envia valores vacios, ahora a buscar como generar algun efecto en los campos vacios.

Muchas gracias nilburcion, quedo funcionando perfecto.

nilburcion · #5 (**permalink**) 07/01/2012, 14:07

Si quieres puedes hacer que cuando un campo este vacio se quede de color rojo con este código:

Código:

<style>
.error{
background-color:#F30;
}

.normal{
background-color:#FFF;
}
</style>

y cambia el anterior script po este:

Código:

function verificar()
{
var rellenados=true;
fi = document.getElementById("fiel");
controles = fi.getElementsByTagName('input');
for ( i=0; i<controles.length; i++){
control = controles[i];
if (control.type == 'text'){
if (control.value=="") {
rellenados=false;
control.className="error";
}else{
control.className="normal";
}
}
}
return rellenados;
}

Sabin · #6 (**permalink**) 07/01/2012, 14:42

Exelente va perfecto.

Gracias de nuevo me ayudaste mucho.