2012-02-23 15 views
9

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.Retorno Falso no funciona dentro de jQuery.ajax

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?

+0

¿por qué lo necesita para devolver falso? ¿Es esto parte de un bloque de código más grande que podría ayudar a alguien a responder la pregunta? – shanabus

+2

¿qué esperas que haga allí? Probablemente debería estar en otro lugar para bloquear el envío de un formulario. – aletzo

Respuesta

19

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.

+0

Puede evitar el indicador 'proceed' por completo si llama directamente a la función de envío del formulario; Llamar a 'HTMLFormElement # submit' no desencadena controladores de envío.Pero tenga en cuenta que aquí hay una condición de carrera; el usuario puede cambiar el correo electrónico * mientras * la llamada ajax se está ejecutando, lo que resulta en el envío del correo electrónico modificado (y sin marcar). (Por cierto, utiliza 'proce' en un lugar,' proceso' en el otro.) –

+0

@ T.J.Crowder, buen consejo sobre el uso del elemento DOM real para enviar el formulario. Actualizaré mi respuesta. También gracias por notar el atributo de datos 'proce' vs' process'. En lo que respecta a la condición de carrera, bueno, es por eso que uno nunca debe confiar en la validación del lado del cliente y asegurarse de hacer cumplir esta validación en el servidor. –

+0

'@ Darin': Una de las * muchas * razones, sí. :-) –

0

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.

-1

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.

+1

ese no es el problema. Intenta devolver un valor en una función asíncrona ^^ – Christoph

+0

Intenté asincria falso en jquery ajax, pero no funcionó tan bien4 –

+0

Agregué el código de JSFiddle en la respuesta. –

0

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(); 
     } 
    }); 
}); 
0

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; 
Cuestiones relacionadas