Retorno Falso no funciona dentro de jQuery.ajax

Question

Tengo un formulario web para actualizar la información del usuario, y cuando actualiza su correo electrónico se realiza una verificación a través del ajax() para advertirle si la nueva dirección de correo electrónico ya está siendo utilizada por otro usuario.

Estoy tratando de cancelar el envío del formulario cuando el correo electrónico está en uso, pero return false; no funciona.

Cualquier otra return false; dentro de if las declaraciones funcionan bien, el problema es solo con esta dentro de la llamada jQuery.ajax().

Aquí está el código real:

var email = jQuery('#email').val(); 
jQuery.ajax({ 
    type : 'GET', 
    url : '/ajax/verify-email.php?email=' + email, 
    success : function(d) { 
     if(d == '1') { 
      alert('Another user is using this email'); 
      jQuery('input[name="email"]').focus(); 
      return false; // this guy over here is not working!!!! 
     } 
    } 
}); 

¿Alguien tiene una solución?

Answer 1

La A en AJAX es realmente muy importante. Significa asincrónico. Esto significa que usted activa una solicitud al servidor que podría tomar algún tiempo en procesarse y obtendrá una respuesta más adelante. Esta respuesta ocurre dentro de la devolución de llamada exitosa. Pero dado que esto sucede mucho más tarde que el envío del formulario real, su formulario ya ha sido enviado antes de que la respuesta regrese. Así que devolver falso de una devolución de llamada exitosa AJAX no tiene ningún sentido en absoluto. Lo que quiere hacer es devolver falso del controlador de envío de su formulario. Veamos cómo podríamos implementar esto.

Usted puede suscribirse al controlador de .submit del formulario y enviar una petición AJAX para verificar si el correo electrónico ya ha sido tomada o no, y si no se toma manualmente a desencadenar la presentación del formulario dentro del éxito AJAX de devolución de llamada:

$('form').submit(function() { 
    // we send an AJAX request to validate the unicity of the email 
    $.ajax({ 
     url: '/ajax/verify-email.php', 
     type: 'POST', 
     data: { email: $('#email').val() }, 
     // we set the context to the form so that inside 
     // the success callback 'this' points to the form 
     context: this, 
     success: function(result) { 
      if (result != '1') { 
       // If the server send something different than 1 
       // we know that the email is unique and trigger 
       // the submission of the form using the underlying 
       // DOM element to avoid calling the .submit handler 
       // recusrively 
       this.submit(); 
      } else { 
       // The email is not unique => we are informing 
       // the user that the email is already in use 
       alert('Another user is using this email'); 
       $('#email').focus(); 
      } 
     } 
    }); 

    // we cancel the normal submission of the form  
    return false; 
}); 

Además, nunca confíe en la validación del lado del cliente. Asegúrese de realizar el control email is unique una vez que el formulario se haya enviado correctamente al servidor. Si está utilizando una base de datos SQL que se logra fácilmente con una restricción única en su campo Correo electrónico.

Answer 2

Ejecuta el código asíncrono aquí. En el momento en que intentas devolver el mensaje falso, es demasiado tarde. Su función ya ha devuelto undefined. Debe proporcionar una devolución de llamada si desea procesar el resultado de su éxito.

Answer 3

Parece que realmente no se entiende la idea jQuery. No necesita usar return false, y no allí. Puede llamar event.preventDefault();:

$('#form').submit(function(event) { 
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) { 
     if (d == '1') { 
      alert('Another user is using this email'); 
      $('#email').focus(); 
     } 
    }); 

    event.preventDefault(); 
}); 

Ver this example.

Answer 4

debe usar event.preventDefault() como se muestra a continuación.

$('#form').submit(function(event) { 
    $.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) { 
     if (d == '1') { 
      alert('Another user is using this email'); 
      $('#email').focus(); 
      event.preventDefault(); 
     } 
    }); 
}); 

Answer 5

No use .submit() en esta situación, utilice un sistema de banderas en cambio, .submit() deberían utilizarse sólo para <form> elementos.

var email = jQuery('#email').val(); 
var flag = 0; 
jQuery.ajax({ 
    type : 'GET', 
    url : '/ajax/verify-email.php?email=' + email, 
    async: false, 
    success : function(d) { 
     if(d == '1') { 
      alert('Another user is using this email'); 
      jQuery('input[name="email"]').focus(); 
      flag = 1; 
     } 
    } 
}); 
if(flag == 1) return false;