A pesar de validar, envia los datos incorrectos

archiblade · #1 (**permalink**) 17/07/2009, 13:27

Hola, soy nuevo aca. Estuve viendo si alguien tuvo este problema pero parece que no. Asi que me decidi en preguntar.

Tengo un formulario, al cual lo valido con javascript. Si yo no le agrego datos al formulario me sale el "alert" como corresponde. Pero luego se redirecciona la pagina a la siguiente, como si los datos fueran correctos.
Y lo que es peor, me carga datos vacios en la base de datos.

Le estuve dando vueltas al asunto, pero no logro darme cuenta en que me equivoco. Si me pueden ayudar se los voy a agradecer muchisimo, por que tengo un cliente al que debo entregarle esto dento de unos dias.

Formulario:

Código HTML:

<div id="">
	<div id="registro">

<script>
function	validar_formulario(){
	if (document.registro.usuario.value.length==0){
		alert("Debe ingresar un nombre de usuario")
		document.registro.usuario.focus()
		return (false);			
	}else{
		if (document.registro.pass.value.length==0){
			alert("Debe ingresar una contraseña")
			document.registro.pass.focus()
			return (false);			
		}else{
			if ((document.registro.email.value.length==0)){
				alert("La dirección de email es incorrecta.")
				return (false);																
			}else{
				if (document.registro.residencia.value.length==0){
					alert("Debe ingresar un pais de residencia")
					return (false);					
				}else{
					document.registro.submit();
					return (true);					
				}			
			}
		}
	}		
}

</script>

<h2>Registrarse</h2>

<form name="registro" onSubmit="return validar_formulario()" action="enviarRegistro.php" method="POST" enctype="multipart/form-data">

<table align="center">
<tr>
	<td>Usuario</td>
	<td><input type="text" name="usuario"></td>
</tr>
<tr>
	<td>Contraseña</td>
	<td><input type="password" name="pass"></td>
</tr>
<tr>
	<td>Email</td>
	<td><input type="text" name="email"></td>	
</tr>
<tr>
	<td>Carrera</td>
	<td>
	<input type="text" name="carrera">
	</td>	
</tr>
<tr>
	<td>Institución</td>
	<td>
	<label><select name="institucion" id="institucion">
	<option>Eliga una opción</option>    
	<option>Cátedra de Introducción a la Historia - Facultad de Humanidades</option>
    <option>Cátedra Compiladores e Intérpretes</option>    
    <option>Colegio Nacional de Buenos Aires</option>
    <option>Instituto de Tecnología ORT Nathan Gould</option>
    <option>Instituto Nacional de Educación Física "General Manuel Belgrano"</option>
    <option>Instituto Tecnológico de Buenos Aires (ITBA)</option>
    <option>Instituto Universitario Aeronáutico</option>
    <option>Instituto Universitario CEMA</option>
    <option>Instituto Universitario Nacional del Arte</option>
    <option>Instituto Universitario de Ciencias de la Salud - Buenos Aires</option>
    <option>Instituto Universitario de Estudios Navales y Marítimos</option>
    <option>Instituto Universitario de la Policia Federal</option>
    <option>Instituto de Enseñanza Superior del Ejército</option>
    <option>Organization for Rehabilitation and Training (ORT)</option>
    <option>Universidad "Juan Agustín Maza"</option>
    <option>Universidad Abierta Interamericana</option>
    <option>Universidad Adventista del Plata</option>
    <option>Universidad Argentina "John F. Kennedy"</option>
    <option>Universidad Argentina de la Empresa</option>
    <option>Universidad Atlantida Argentina</option>
    <option>Universidad Austral Buenos Aires</option>
    <option>Universidad Blas Pascal</option>
    <option>Universidad Centro de Altos Estudios en Ciencias (CAECE), Buenos Aires</option>
    <option>Universidad Católica Argentina Santa Maria de los Buenos Aires</option>
    <option>Universidad Católica de Cuyo</option>
    <option>Universidad Católica de Córdoba</option>
    <option>Universidad Católica de La Plata</option>
    <option>Universidad Católica de Salta</option>
    <option>Universidad Católica de Santa Fé</option>
    <option>Universidad Católica de Santiago del Estero</option>
    <option>Universidad Champagnat</option>
    <option>Universidad de Belgrano</option>
    <option>Universidad de Palermo</option>
    <option>Universidad de San Andrés</option>
    <option>Universidad de Mendoza</option>
    <option>Universidad de Morón</option>
    <option>Universidad de la Patagonia San Juan Bosco</option>
    <option>Universidad de Ciencias Empresariales y Sociales</option>
    <option>Universidad de Buenos Aires (UBA)</option>
    <option>Universidad de Congreso</option>
    <option>Universidad del Salvador</option>
    <option>Universidad del Nordeste (U.N.NE.)</option>
    <option>Universidad del CEMA</option>
    <option>Universidad Empresarial Siglo 21</option>
    <option>Universidad Fasta - Mar del Plata</option>
    <option>Universidad Fasta - Bariloche</option>
    <option>Universidad John F. Kennedy</option>
    <option>Universidad Maimónides</option>
    <option>Universidad Nacional de Catamarca</option>
    <option>Universidad Nacional de Cuyo</option>
    <option>Universidad Nacional de Córdoba</option>
    <option>Universidad Nacional de Entre Ríos</option>
    <option>Universidad Nacional de Formosa</option>
    <option>Universidad Nacional de General San Martín</option>
    <option>Universidad Nacional de General Sarmiento</option>
    <option>Universidad Nacional de Jujuy</option>
    <option>Universidad Nacional de La Matanza</option>
    <option>Universidad Nacional de La Pampa</option>
    <option>Universidad Nacional de La Plata</option>
    <option>Universidad Nacional de La Rioja</option>
    <option>Universidad Nacional de Lanus</option>
    <option>Universidad Nacional de Lomas de Zamora</option>
    <option>Universidad Nacional de Luján</option>
    <option>Universidad Nacional de Mar del Plata</option>
    <option>Universidad Nacional de Misiones</option>
    <option>Universidad Nacional de Quilmes</option>
    <option>Universidad Nacional de Rosario</option>
    <option>Universidad Nacional de Río Cuarto</option>
    <option>Universidad Nacional de Salta</option>
    <option>Universidad Nacional de San Juan</option>
    <option>Universidad Nacional de San Luis</option>
    <option>Universidad Nacional de Villa María</option>
    <option>Universidad Nacional del Sur</option>
    <option>Universidad Nacional del Litoral</option>
    <option>Universidad Nacional del Comahue</option>
    <option>Universidad Nacional del Centro</option>
    <option>Universidad Virtual de Quilmes</option>
    <option>Universidad Nacional de la Patagonia Austral</option>
    <option>Universidad Tecnológica Nacional (UTN)</option>    
    <option>Universidad Torcuato Di Tella</option>
    <option>Otra</otro>  	 	
	</td>	
</tr>
<tr>
	<td>Pais de Residencia</td>
	<td>
	<label><select name="residencia" id="residencia">
	<option>Eliga una opción</option>    
	<option>Argentina</option>
	<option>Brasil</option>
	<option>Bolivia</option>
	<option>Chile</option>
	<option>Colombia</option>
	<option>Costa Rica</option>
	<option>Cuba</option>
	<option>Ecuador</option>
	<option>El Salvador</option>
	<option>España</option>
	<option>Guatemala</option>
	<option>Honduras</option>
	<option>México</option>
	<option>Nicaragua</option>
	<option>Panamá</option>
	<option>Paraguay</option>
	<option>Perú</option>
	<option>Puerto Rico</option>
	<option>República Dominicana</option>
	<option>Uruguay</option>
	<option>Venezuela</option>
	<option>Otro</option>
  	</select></label>
	</td>	
</tr>
<tr>
	<td colspan="2" align="right"><input type="submit" value="Agregar"></td>
</tr>
</table>
</form>
	</div>	
</div>

Aca la siguiente paguina donde se carga la base de datos, la pongo por si acaso, pero creo que el error esta en la primera no en esta:

Código PHP:

  <? 
include_once("funciones/funciones.php"); 
 
$usuario     = $_POST["usuario"];  
$pass         = $_POST["pass"];  
$email     = $_POST["email"];  
$carrera     = $_POST["carrera"]; 
$institucion = $_POST["institucion"]; 
$residencia     = $_POST["residencia"];  
  
if (isset($usuario) and isset($pass) and isset($email) and isset($carrera) and isset($institucion) and isset($residencia)) {  
 
    $mensaje="Los datos son correctos y han sido enviados. Ya puede ingresar.";  
    agregarUsuario($usuario,$pass,$email,$carrera,$institucion,$residencia);     
 
}else{  
    echo "Error al enviar los datos. Lamentamos las molestias, intentelo mas tarde."; 
}  
?> 
 
<script> 
window.location="index.php?pag=mensaje.php&mensaje=<?=$mensaje;?>"; 
</script>

David · #2 (**permalink**) 17/07/2009, 13:32

La parte de Javascript está bien, a excepción de tu forma de validar el <select>. Debes asignar el value correspondiente a cada opción (no todos los navegadores toman el value directo del text), y a la primera opción asignarle un value vacío.

Por otro lado, del lado del servidor debes usar empty() además de isset() para comprobar que no se ingresen datos vacíos a la base de datos.

djaevi · #3 (**permalink**) 17/07/2009, 15:15

Mira te lo arme algo mas resumido el tema de la validacion aver que te parece yo lo probe y funciona lo mas bien:

Arme la funcion de una forma un tanto mas resumida y mas prolija si se quiere mira te la voy comentando :D...

Código PHP:

  function validar_formulario() { 
// en las primeras 2 lineas creo 2 variables para imprimir errores de validacion 
// un array que colecta errores y una cadena donde se concatenan para que luego 
// se muestran en un alert 
 
var cadenaErrores = "Error al llenar los siguientes campos:\n"; 
var errores = new Array(); 
 
// creo una variable que llame al formulario registro 
 
    var elForm = document.registro; 
 
// aca hago un bucle que recorra todos los elementos del formulario y los valide 
// de acuerdo a su tipo para esto hago un switch dentro del for 
 
     for (var i=0; i<elForm.elements.length; i++) { 
 
// en caso que sea tipo text o password pregunto por el largo del texto 
// si es igual a 0 insertara el nombre de este campo en el array de errores 
// para luego informar al usuario donde se equivoco 
 
         switch (elForm.elements[i].type) { 
            case 'text': 
            if (elForm.elements[i].value.length == 0) {errores.push(elForm.elements[i].name)} 
            break; 
            case 'password': 
            if (elForm.elements[i].value.length == 0) {errores.push(elForm.elements[i].name)} 
            break; 
 
// si es un select en lugar del tamaño del texto pregunto por el numero de opcion 
// seleccionado si es 0 se agrega al array de errores 
 
            case 'select-one': 
            if (elForm.elements[i].selectedIndex == 0) {errores.push(elForm.elements[i].name)} 
            break; 
            } 
        } 
 
// Por ultimo pregunto si el tamaño del array errores es distinto de 0 
// de ser esto asi quiere decir que al menos hubo un error por lo cual no se puede 
// hacer el submit entonces muestro los errores primero uniendolos a la cadena 
// que declare antes llamada cadenaErrores y luego de concatenar hago el alert 
// ya fuera del bucle for. 
 
            if (errores.length != 0)  { 
                for (var i=0; i<errores.length; i++) { 
                    cadenaErrores += errores[i] + "\n"; 
                } 
                alert(cadenaErrores); 
 
// en el else si el tamaño del array errores es 0 esto implica que no hubo errores 
// y ahi recien si se envian los datos por submit por lo cual no tienes que filtrar 
// los datos luego con php :D 
 
            }else{ 
                elForm.submit(); 
                } 
        }

En el codigo html lo unico que hice fue sacarle al form la opcion onSubmit y al boton le cambie el tipo por type button ya que vos no vas a validar el formulario con el boton sino con la funcion javascript por lo cual lo unico que queremos que haga el boton es llamar a esa funcion y que en todo caso ella se encarga de hacer el submit :D... estas 2 lineas son las que modifique...

Código HTML:

<form name="registro" action="enviarRegistro.php" method="POST" enctype="multipart/form-data">

<input type="button" value="Agregar" onclick="validar_formulario();">

Salu2 espero te sirva

David · #4 (**permalink**) 17/07/2009, 15:20

Hola, djaevi.

Sólo comentar que es mejor usar un botón submit y validar en el evento onsubmit por cuestión de accesibilidad y semántica.

archiblade · #5 (**permalink**) 19/07/2009, 23:04

Bueno antes que nada muchas gracias por contestarme.

David lo que me faltaba era agregar los values a los select. Evidentemente mi navegador no lo reconoce directamente de texto. Cambiando eso ya empezo a funcionar.

djaevi gracias por tomarte el trabajo de armar devuelta la funcion. La probe y anduvo lo mas bien asi como vos lo propusiste. Gracias!

Saludos