[SOLUCIONADO] Detener envio de formulario con Ajax

[santi85]

Hola!

Estoy realizando las validaciones de un formulario de registro y quiero hacerlas con Ajax. Una de las validaciones que quiero hacer es, verificar si en la base de datos está el email que el usuario quiere registrar, si éste existe ahí nomas le sale una notificación (en el div #info_error) que ese mail no esta disponible y si esta disponible no notifica nada.

Éste es el codigo del formulario:

Código HTML:

<form id="registerForm" class="registerForm" method="POST">
        <ul>            
            <li>
                <label for="registerEmail">*Email:</label><div id="info_error"></div>                
                <input id="registerEmail" class="" type="email" name="email" required>                 
            </li>
            <li><label for="registerPass">*Contraseña:</label>
                <input id="registerPass"  class="" type="password" name="pass" minlength="5" required>
            </li>
        </ul>
        <button id="registerBtn" type="submit">Registrarse</Button>
</form> 

Aquí el Ajax:

Código Javascript:

$(document).ready(function() {
   $('#registerEmail').blur(function(e){
        
        var email = $('#registerEmail').val();    
        
        var dataString = '&email='+email;
 
        $.ajax({
            type: "POST",
            url: "ajax/email_existense.php",
            data: dataString,           
            success: function(resp){
                if(resp == 1){ 
                    $('#registerEmail').on('focus', function(){
                        $('#info_error').hide().html('<div id="email_not_enable">Email ya registrado. <a href="index.php?page=login">Inicia Sesión</a></div>');
                    });                    
                    $('#info_error').show().html('<div id="email_not_enable">Email ya registrado. <a href="index.php?page=login">Inicia Sesión</a></div>');     
                    
                    $("#registerForm").submit(function(){
                        return false;                        
                    })
                
                }else{
                    
                    $("#registerForm").submit(function(){
                        return true;                        
                    })
                }
               
            }            
        });
    });
});
 

Y aqui el código php donde verifico si el mail esta en la base de datos o no.

Código PHP:

   
if($_POST) {          
   $email = $_POST['email'];
}
 
$sql = "SELECT email FROM users WHERE email = '$email'";
 
$result = dbquery($sql);                
 
if(dbgetNumRows($result) > 0){
            
   echo 1;
                            
}else{
               
  echo 0;
 
} 
   

Bien!. He aquí el problemilla que tengo. Primero aclaro que soy principiante en Javascript y Ajax, pero de problemas se aprende, . Lo que quiero hacer, básicamente, es que si el email existe en la base de datos el formulario no se envíe y si no existe que se envíe normalmente.

Entonces, si el email que el usuario ingresa no esta registrado en la base de datos, el php devuelve un cero, pasa al Ajax y el .submit() me da un true y manda el formulario.

Hasta ahí, todo bien, funciona. Pero, cuando el email esta registrado en la base de datos, el php devuelve un uno y Ajax manda la notificación diciendo que el email esta registrado y el .submit() da un false y no se envia el formulario. EL PROBLEMA, es que al cambiar en ese momento el email por uno válido, que no este en la BD, se borra la notificación correctamente, peeeero no me deja enviar el formulario, es como que el .submit() sigue siendo falso, por mas que el php haya devuelto cero en ese momento.

La parte de conexion a la BD y el INSERT lo hago en otros archivos php aparte.

Seguramente estoy haciendo algo mal con el .submit(). Si alguien es tan amable de darme una mano con este tema se lo agradecería a montones .

Desde ya muchisimas gracias por su tiempo, un gran saludo!

[xerifandtomas]

Intenta hacerle un trim a la respuesta para eliminar que pueda tener algún espacio y que de hay que la comparación siga siendo falsa

Código Javascript:

resp = $.trim(resp);
 

[santi85]

Muchas gracias por el aporte Xerifandtomas. Logre solucionarlo de la siguiente manera:

Quite los .submit() y lo que hice fue desactivar el boton submit con $("#idBtn").attr("disabled", true), para cuando el php me devuelve un uno, osea el email está registrado en la BD, y para cuando esta disponible el email utilizo $("#idBtn").removeAttr("disabled"), ambos dentro de la sentencia if.

Osea, el codigo viejo era:

Código Javascript:

if(resp == 1){ 
   $('#registerEmail').on('focus', function(){
   $('#info_error').hide().html('<div id="email_not_enable">Email ya registrado. <a href="index.php?page=login">Inicia Sesión</a></div>');
    });                    
    $('#info_error').show().html('<div id="email_not_enable">Email ya registrado. <a href="index.php?page=login">Inicia Sesión</a></div>');     
                    
    $("#registerForm").submit(function(){
       return false;                        
    })
                
    }else{
                    
    $("#registerForm").submit(function(){
       return true;                        
    })
}
 

El nuevo quedó de la siguiente manera:

Código Javascript:

if(resp == 1){ 
   $('#registerEmail').on('focus', function(){
   $('#info_error').hide().html('<div id="email_not_enable">Email ya registrado. <a href="index.php?page=login">Inicia Sesión</a></div>');
   });                    
   $('#info_error').show().html('<div id="email_not_enable">Email ya registrado. <a href="index.php?page=login">Inicia Sesión</a></div>');     
                    
   $("#registerBtn").attr("disabled", true);
                
   }else{          
                    
   $("#registerBtn").removeAttr("disabled");
                    
   }
 

Espero que esto le sea de utilidad a todos y si alguien tiene algo mas para aportar y mejorar el código, bienvenido sea. Muchas gracias y saludos!