¿validar formulario dinamicos con Javascript Ayuda?
[js]Var formu=document.formu;
If (form. archivos[].value==0){
Alert(“El campo esta Vacio.”);
}[/js]
Hola a todos si alguien me puede ayudar necesito validar los campos que se crean dinámicamente pero si vemos el imput tiene el siguiente nombre.
[html5]<input type="file" name="archivos[]" />[/html5]
Necesito validar que no este vacio cada input que se crea alguien sabe como se puede hacer estuve intentando pero no se mucho de Javascript.
Le muestro el codigo.
hace 1 día - Quedan 3 días para responder
Información adicional
Me olvide del codigo si les sirve para entender mejor.
[html5]<body>
<form name="formu" id="formu" action="phpself.php" method="post" enctype="multipart/form-data">
<dl>
<dt><label>Archivos a Subir:</label></dt>
<!-- Esta div contendrá todos los campos file que creemos -->
<dd><div id="adjuntos">
<!-- Hay que prestar atención a esto, el nombre de este campo debe siempre terminar en []
como un vector, y ademas debe coincidir con el nombre que se da a los campos nuevos
en el script -->
<input type="file" name="archivos[]" />
</div></dd>
[br /][br /][br /]
<dt><a href="#" onClick="addCampo()">Subir otro archivo</dt>
[br /][br /][br /]
<dd><input type="submit" value="Enviar" id="envia" name="envia" /></dd>
</dl>
</form>
</body>
</script>
<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
//diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
return (!evt [/html5]
¿validar formulario dinamicos con Javascript Ayuda?
Comenzado por
alejandrovalencia
, jul 25 2011 09:42
10 respuestas en este tema
#2
enecumene
-
- Administrador
-
- 7.419 mensajes
Webmaster
- LocationRepública Dominicana
Escrito 25 julio 2011 - 10:03
Hola y bienvenido a DelphiAccess, ensaya con lo siguiente:
[js]<script type="text/javascript">
function validar()
{
inputs = document.getElementsByName('archivos[]');
for (i=0; i<inputs.length; i )
{
if (inputs[i].value == '')
{
alert("¡Aún hay campos sin rellenar!");
}
}
}
</script>[/js]
Saludos.
[js]<script type="text/javascript">
function validar()
{
inputs = document.getElementsByName('archivos[]');
for (i=0; i<inputs.length; i )
{
if (inputs[i].value == '')
{
alert("¡Aún hay campos sin rellenar!");
}
}
}
</script>[/js]
Saludos.
#3
alejandrovalencia
-
- Miembros
-
- 5 mensajes
Newbie
- LocationMadrid españa
Escrito 25 julio 2011 - 10:44
Muchas gracias si me funciona el problema que tengo, cuando pongo el código me valida los campos vacíos me genera los imput dinámicos pero cuando ajunto el fichero me bloquea el navegador sabes como lo puedo solucionar. Muchas gracias por la ayuda
Saludos.
<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
//diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
return (!evt) ? event : evt;
}
//Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
addCampo = function () {
//Creamos un nuevo div para que contenga el nuevo campo
nDiv = document.createElement('div');
//con esto se establece la clase de la div
nDiv.className = 'archivo';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
nDiv.id = 'file' ( numero);
//creamos el input para el formulario:
nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos
//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
nCampo.name = 'archivos[]';
//Establecemos el tipo de campo
nCampo.type = 'file';
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
a.name = nDiv.id;
//Este link no debe ir a ningun lado
a.href = '#';
//Establecemos que dispare esta funcion en click
a.onclick = elimCamp;
//Con esto ponemos el texto del link
a.innerHTML = 'Eliminar';
//Bien es el momento de integrar lo que hemos creado al documento,
//primero usamos la función appendChild para adicionar el campo file nuevo
nDiv.appendChild(nCampo);
//Adicionamos el Link
nDiv.appendChild(a);
//Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien
//con esta función obtenemos una referencia a ella para usar de nuevo appendChild
//y adicionar la div que hemos creado, la cual contiene el campo file con su link de eliminación:
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
evt = evento(evt);
nCampo = rObj(evt);
div = document.getElementById(nCampo.name);
div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
//*************************************************************************************
function validar()
{
inputs = document.getElementsByName('archivos[]');
for (i=0; i<inputs.length; i )
{
if (inputs[i].value == '')
{
alert("¡Aún hay campos sin rellenar!");
return false
}
}
document.formu.submit();
}
</script>
este es el form que estoy utilizando
<form name="formu" id="formu" action="phpself.php" method="post" enctype="multipart/form-data">
en este se genera los campo de eliminar.
<dt><a href="#" onClick="addCampo()">Subir otro archivo</a></dt>
este es para enviar es cuando se bloquea el navegador.
<dd><input type="button" id="envia" name="envia" value="Enviar" onClick="validar();" /></dd>
Saludos.
<script type="text/javascript">
var numero = 0; //Esta es una variable de control para mantener nombres
//diferentes de cada campo creado dinamicamente.
evento = function (evt) { //esta funcion nos devuelve el tipo de evento disparado
return (!evt) ? event : evt;
}
//Aqui se hace lamagia... jejeje, esta funcion crea dinamicamente los nuevos campos file
addCampo = function () {
//Creamos un nuevo div para que contenga el nuevo campo
nDiv = document.createElement('div');
//con esto se establece la clase de la div
nDiv.className = 'archivo';
//este es el id de la div, aqui la utilidad de la variable numero
//nos permite darle un id unico
nDiv.id = 'file' ( numero);
//creamos el input para el formulario:
nCampo = document.createElement('input');
//le damos un nombre, es importante que lo nombren como vector, pues todos los campos
//compartiran el nombre en un arreglo, asi es mas facil procesar posteriormente con php
nCampo.name = 'archivos[]';
//Establecemos el tipo de campo
nCampo.type = 'file';
//Ahora creamos un link para poder eliminar un campo que ya no deseemos
a = document.createElement('a');
//El link debe tener el mismo nombre de la div padre, para efectos de localizarla y eliminarla
a.name = nDiv.id;
//Este link no debe ir a ningun lado
a.href = '#';
//Establecemos que dispare esta funcion en click
a.onclick = elimCamp;
//Con esto ponemos el texto del link
a.innerHTML = 'Eliminar';
//Bien es el momento de integrar lo que hemos creado al documento,
//primero usamos la función appendChild para adicionar el campo file nuevo
nDiv.appendChild(nCampo);
//Adicionamos el Link
nDiv.appendChild(a);
//Ahora si recuerdan, en el html hay una div cuyo id es 'adjuntos', bien
//con esta función obtenemos una referencia a ella para usar de nuevo appendChild
//y adicionar la div que hemos creado, la cual contiene el campo file con su link de eliminación:
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
elimCamp = function (evt){
evt = evento(evt);
nCampo = rObj(evt);
div = document.getElementById(nCampo.name);
div.parentNode.removeChild(div);
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
//*************************************************************************************
function validar()
{
inputs = document.getElementsByName('archivos[]');
for (i=0; i<inputs.length; i )
{
if (inputs[i].value == '')
{
alert("¡Aún hay campos sin rellenar!");
return false
}
}
document.formu.submit();
}
</script>
este es el form que estoy utilizando
<form name="formu" id="formu" action="phpself.php" method="post" enctype="multipart/form-data">
en este se genera los campo de eliminar.
<dt><a href="#" onClick="addCampo()">Subir otro archivo</a></dt>
este es para enviar es cuando se bloquea el navegador.
<dd><input type="button" id="envia" name="envia" value="Enviar" onClick="validar();" /></dd>
#4
enecumene
-
- Administrador
-
- 7.419 mensajes
Webmaster
- LocationRepública Dominicana
Escrito 25 julio 2011 - 11:32
¿A qué te refieres con te bloquea el navegador?.
#5
alejandrovalencia
-
- Miembros
-
- 5 mensajes
Newbie
- LocationMadrid españa
Escrito 25 julio 2011 - 11:58
En firefox se bloquea por completo y hay q cerrarlo con administrador de tarea y con crome no hace nada cuando ajuntas el fichero y le das a enviar.
#6
enecumene
-
- Administrador
-
- 7.419 mensajes
Webmaster
- LocationRepública Dominicana
Escrito 25 julio 2011 - 12:04
Ya eso es otro tema, pos creo que no tiene nada que ver con lo que has posteado aquí a mi entender, pero para descartar el asunto, prueba quitando la validación, si sigue ocurriendo, entonces el problema está en el script donde subes los ficheros.
Saludos.
Saludos.
#7
poliburro
-
- Administrador
-
- 4.945 mensajes
Advanced Member
- LocationMéxico
Escrito 25 julio 2011 - 12:07
Seguramente son problemas con el navegador. Coloca en una paguina de prueba lo estrictamente necesario y prueba
#8
alejandrovalencia
-
- Miembros
-
- 5 mensajes
Newbie
- LocationMadrid españa
Escrito 25 julio 2011 - 12:18
Quintando la validación function validar() y colocando los botones normales Submit Si funciona, 
genera lo imput y envía el fichero. 
Pero cuando le coloco el código que me distes para validar funciona la validación, :shocked:genera los imput, pero no envía a la pagina php (li)por que se bloquea el navegador 
Creo que el problema esta en el orden de cómo se coloca las Funciones (es una idea.)
Si ves abajo en el código HTML llamamos a 2 funciones una que genera los imput y otra que valida.
Puede ser que el código tenga 2 tipos de submit diferentes.
(y)estoy seguro que no es problema del navegador
algo pasa en una parte del codigo .
genera lo imput y envía el fichero. Pero cuando le coloco el código que me distes para validar funciona la validación, :shocked:genera los imput, pero no envía a la pagina php (li)por que se bloquea el navegador Creo que el problema esta en el orden de cómo se coloca las Funciones (es una idea.)
Si ves abajo en el código HTML llamamos a 2 funciones una que genera los imput y otra que valida.
Puede ser que el código tenga 2 tipos de submit diferentes.
(y)estoy seguro que no es problema del navegador
algo pasa en una parte del codigo .
#9
cesar_cz
-
- Moderadores
-
- 919 mensajes
Advanced Member
- LocationChile
Escrito 25 julio 2011 - 02:18
Hola Alejandro, mira el navegador se te bloquea porque seguramente se te genera un for infinito desde javascript, entonces técnicamente lo que sucede es que se produce un bucle sin fin que bloquea la RAM de tu sistema operativo...
Creo que lo mejor sería hacerlo así :
Para recibir los datos sería sencillo mira
saludos
Creo que lo mejor sería hacerlo así :
<form name="form" action="" method="post">
//Si te fijas se genera el input de manera dinámica y usas un contador para asignarle valores...
<?php
$cantidad=10;//esta variable define cuántas veces se generan los input
for ($i=0;$i<$cantidad;$i++)
{
?>
<input type="text" name="<?php echo "name_$_i";?>" value="<?php echo "value_$_i";?>" />
<?php
}
?>
<input type="hidden" name="cantidad" value="<?php echo $cantidad;?>" />
<input type="submit" value="enviar" />
</form>
Para recibir los datos sería sencillo mira
<br />
<?php
if (isset($_POST))
{
for ($i=0;$i<$_POST["cantidad"];$i++)
{
echo $_POST["name_$i"];
echo "<br>";
}
}
?>
saludos
#10
alejandrovalencia
-
- Miembros
-
- 5 mensajes
Newbie
- LocationMadrid españa
Escrito 25 julio 2011 - 02:46
No lo puedo creer que el profesor cesar cancino 
me responde mi problema jeje estoy enganchado con tus videos 
ya ni duermo jeje. 
No me imagine hacer los input de esa manera.
Con el código que me mandas el problema es que se genera los imput automáticamente y si tengo que subir 10 fotos tendría que generar 10 imput.
La idea seria que la persona le de clic para que genere los imput que necesita.
Voy hacer mas prueba con tu código
me responde mi problema jeje estoy enganchado con tus videos ya ni duermo jeje. No me imagine hacer los input de esa manera.
Con el código que me mandas el problema es que se genera los imput automáticamente y si tengo que subir 10 fotos tendría que generar 10 imput.
La idea seria que la persona le de clic para que genere los imput que necesita.
Voy hacer mas prueba con tu código
#11
lezamablr
-
- Miembros
-
- 25 mensajes
Member
Escrito 25 julio 2011 - 04:16
Recomendación express: Usen jQuery, es más fácil:
Seleccionar todos los input's vacíos:
var elem = $('input:text[value=""]'); // Array de objetos DOM
Contar todos los inputs vacíos:
var cont = $('input:text[value=""]').length;
Seleccionar todos los input's vacíos:
var elem = $('input:text[value=""]'); // Array de objetos DOM
Contar todos los inputs vacíos:
var cont = $('input:text[value=""]').length;
