Validar campos input (text, file)

adex · #1 (**permalink**) 12/07/2008, 00:31

Hola amigos del foro
juntando códigos del foro logré validar el campo input (text)
y no el campo input (file), que debo corregir?
gracias por su ayuda!

Código HTML:

<html>
<head>
<title>upload</title>
<script language="javascript">
function comprueba_extension(formulario, archivo) {
	//extensiones_permitidas = new Array(".pdf", ".zip", ".rar", ".doc");
	extensiones_permitidas = new Array(".pdf", ".zip", ".rar");
	mierror = "";
	if (!archivo) {
		//Si no tengo archivo, es que no se ha seleccionado un archivo en el formulario
		mierror = "No has seleccionado el archivo.";
	}else{
		//recupero la extensión de este nombre de archivo
		extension = (archivo.substring(archivo.lastIndexOf("."))).toLowerCase();
		//alert (extension);
		//compruebo si la extensión está entre las permitidas
		permitida = false;
		for (var i = 0; i < extensiones_permitidas.length; i++) {
			if (extensiones_permitidas[i] == extension) { 
				permitida = true;
				break;
			}
		}
		if (!permitida) {
			mierror = "Solo está permitido los documentos del tipo: \n\n     » " + extensiones_permitidas.join();
		}else{
			//submit!
			//alert ("El archivo se agregará al documento");
			formulario.submit();
			return 1;
		}
	}
	//si estoy aqui es que no se ha podido submitir
	alert (mierror);
	return 0;
}

</script>

<script>
     function validar(){
             if(forma.files_detalle.value != ""){
	document.forma.submit()
              }else{
                window.alert('Por Favor completa todos los datos...!!!');
              }
     }
</script>
</head>

<body>
<b><?echo $FileIngresado;?></b>
<form method="Post" name="forma" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?echo $add_files;?>">

Detalle o nombre del Archivo:<br><br>
<input type="text" name="files_detalle"><br><br>

Agregar Archivo:<br>
<input type="file" name="partesFile"><br>
<input style="color:red" value="  < subir archivo >  " type="button" onClick="validar()" onclick="comprueba_extension(this.form, this.form.partesFile.value)">
      
 </form> 
</body>

</html>

caricatos · #2 (**permalink**) 12/07/2008, 01:49

Hola:

Lo que no puedes es usar 2 onclick (ni ningún otro manejador de eventos del mismo nombre), y debes acostumbrarte a usar botones del tipo submit, y la validación en el tag form (manejador onsubmit)... de esta manera las funciones deben devolver true/false (false cancela el envío)

En tu caso, usando 2 validadores, se unen con el operador lógico and...

<form onsublit="return (valida(this) && valida_extensión(this))"...

Con esa forma, un botón submit para el envío y las funciones que devuelvan false cuando no pasen la validación, no solo te va a funcionar, sino que lo haces bien, y de forma accesible.

Saludos

adex · #3 (**permalink**) 12/07/2008, 02:08

Gracias Caricatos por responder pero no he logrado adaptar tus indicaciones al código, modifique esta línea:

Código HTML:

<form method="Post" name="forma" onsubmit="return(valida(this) && comprueba_extension(this))" enctype="multipart/form-data">

Código HTML:

<input style="color:red" value="  < subir archivo >  " type="submit">

y cambiando el botón por el submit y sigue sin funcionar seguro estoy haciendo alguna torpeza, gracias nuevamente.

caricatos · #4 (**permalink**) 12/07/2008, 02:20

Hola:

La forma más rápida de arreglar tus validaciones, es cambiando las lineas que hacen submit por return true, y las demás salidas return false...

Con lo de las validaciones, creo que con expresiones regulares iría mejor:

extensiones = /\.(zip|pdf|rar]$/i;

vale = extensiones.test(archivo.value);

return vale;

Aunque no es un tema que controle mucho, creo que esas líneas son suficientes (espero que alguien que sepa más lo confirme)

Saludos

adex · #5 (**permalink**) 12/07/2008, 02:27

Gracias caricatos por responder!