Buenas,
Soy nueva en el mundo del desarrollo web así que necesito vuestra ayuda. Tengo una página con un formulario de entrada en el que al submitirse se ejecuta una función javascript para validar si el usuario ya existe. Esta función javascript hace una llamada Ajax para llamar a un archivo php donde se accede a la base de datos.
Mi problema es que al hacer una prueba de login con un usuario que no existe el formulario me redirige a la página que pongo en el atributo "action", independientemente de que la función que hay en onsubmit devuelve false, pero si ejecuto la función javascript de validación paso a paso con la herramienta Firebug todo funciona bien. Se muestra un error en el formulario y el navegador no se redirige a la página indicada en "action".
Adjunto el código fuente para aclarar esto:
Formulario de login:
<form id="formLogin" name="formLogin" onsubmit="return validaLogin()" method="POST" action="pagina2.php">
<h1>Inicia sesión</h1>
<fieldset>
<label>Usuario/email: </label>
<input name="usuario" type="text" size="30" focused autocomplete />
<div id="error-usuario"></div>
<label>Contraseña: </label>
<input name="password" type="password" size="10" focused />
<div id="error-password"></div>
</fieldset>
<fieldset>
<input class="botonenviar" name="entrar" type="submit" value="Entrar" class="enviar" />
<input type="checkbox" name="recordarPass" value="recordarPass" /><label>  Recordar contraseña </label>
</fieldset>
</form>
Función Javascript validaLogin:
function validaLogin() {
if(compruebaLogin()){
return true;
}
else{
return false;
}
}
function compruebaLogin() {
//Se recuperan los inputs del formulario
var usuario = document.formLogin.usuario.value;
var password = document.formLogin.password.value;
var recordarPass = document.formLogin.recordarPass.checked;
var pagina = false;
if(window.XMLHttpRequest()){
pagina = new XMLHttpRequest();
}else {
if(window.ActiveXObject()) {
try {
pagina = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
pagina = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}else{
return false;
}
}
pagina.onreadystatechange=function(){
if(pagina.readyState==4 && pagina.status==200){
var respuesta = pagina.responseText.evalJSON();
if(respuesta.error_usuario == "" && respuesta.error_password == "") {
return true;
} else {
document.getElementById('error-usuario').innerHTML=respuesta.error_usuario;
document.getElementById('error-password').innerHTML=respuesta.error_password;
return false;
}
}
}
var params = "usuario="+usuario+"&password="+password+"&checkbo x="+recordarPass;
pagina.open("POST","../lib/controller/validaUsuario.php",true);
pagina.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
pagina.setRequestHeader("Content-length", params.length);
pagina.setRequestHeader("Connection", "close");
pagina.send(params);
}
Archivo php validaUsuario.php:
$nickname=htmlspecialchars(trim($_POST['usuario']));
$password=trim($_POST['password']);
$ent_usuario = new Usuario(); //entidad con los atributos de la tabla Usuario
$usuarioDAO = new UsuarioDAO(); //DAO para gestionar los accesos a la tabla Usuario
//La función compruebaLogin accede a la tabla usuario y devuelve el usuario 'nickname' o una entidad usuario vacía si no existe
$ent_usuario = $usuarioDAO->compruebaLogin($nickname, $password);
$error_usuario="";
$error_password="";
if($ent_usuario->nickname=="") {
$error_usuario = 'Usuario no existe. Regístrate <a href="#">aquí!</a>';
} else {
if($ent_usuario->password != $password) {
$error_password = 'Contraseña incorrecta';
}
}
$return = array("error_usuario" => $error_usuario, "error_password" => $error_password);
die(json_encode($return));
Com decía arriba. Si hago la prueba con un usuario que no existe debería mostrarse el error "Usuario no existe. Regístrate aquí"
en el <div id="error-usuario"></div> del formulario. Si hago esta prueba ejecutando paso a paso con Firebug todo funciona bien, pero si ejecuto sin ir paso a paso no se muestra el error y el navegador redirecciona a pagina2.php