Comprobar si existe un correo con AJAX

Para comprobar si un correo ya está registrado no es necesario viajar hasta el servidor, podemos hacerlo con AJAX de forma asíncrona.

turner

archivado en: PHP/AJAX / 6 diciembre, 2012

AJAX permite hacer cosas muy chulas y ahorrar viajes al servidor para nimiedades, como verificar si una cuenta de correo o nombre de usuario ya existe cuando se está rellenando un formulario. La solución que pensé para esto en un trabajo reciente no sé si es muy ortodoxa, pero el caso es que funciona 😉 .

Entao, que dicen los portugueses, el proceso es el siguiente:

1) En el formulario, junto al campo a verificar, en este caso el correo, se incluye un div con display none con el texto a mostrar en el caso de que el email ya esté en uso, es decir, ya indexado en la base de datos (línea 5).

  1. <form id="id_del_formulario" name="nombre_del_formulario" method="post" class="clase_del_formulario" action="pagina_que_recoge" onsubmit="return validar_formulario(this);">
  2. <!-- ... campos varios por aquí (nombre, apellidos, nick...) -->
  3. <p><input id="signup_email" name="signup_email" type="text" size="40" value="Email" />
  4. <div id="email_o" style="display:none;">Por favor, comprueba el correo</div>
  5. <div id="campo_oculto" style="display:none;">El correo ya está en uso</div> 
  6. <p><input type="submit" value="Continuar" class="..." name="..." id="..."/></p>
  7. </form>

2) Como mandan los cánones, onsubmit enviamos los datos a un script, en este caso de JavaScript, para verificar los datos en el lado del cliente... lo de siempre, pero al llegar a la verificación del correo, si está bien, si pasa la primera verificación, llamamos a una función AJAX a la que enviamos como argumento el correo (línea 25):

  1. function validar_formulario_datos_signup(){
  2. // incializamos la variable check con 1 (funciona)
  3. var check;
  4. check = 1;
  5. // recogemos los datos del formulario
  6. var nombre;
  7. nombre = document.getElementById("nombre").value;
  8. // etcétera
  9. // el campo del correo:
  10. var email;
  11. email = document.getElementById("signup_email").value;

  12. // empezamos a verificar cosas. A la que algo falle, check toma como valor 0
  13. if ( nombre == null || nombre.length < 2 || /^\s+$/.test(nombre) ) {
  14. check_signup = 0;
  15. }
  16. // etcétera
  17. // Esta es la verificación que nos importa. Primero vemos que el correo esté bien escrito
  18. if ( email == null ||  (/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/.test(email))!=1 ) {
  19. document.getElementById("email_o").style.display = 'block';
  20. check_signup = 0;
  21. } else {
  22. document.getElementById("email_o").style.display = 'none';
  23. // Si está bien, llamamos a la función AJAX enviándole como argumento el correo
  24. comprueba_mail2=email_verificacion_ajax(email);
  25. if (comprueba_mail2 == 1) {
  26. document.getElementById("campo_oculto").style.display = 'block';
  27. check_signup = 0;
  28. } else {
  29. document.getElementById("campo_oculto").style.display = 'none';
  30. }
  31. }
  32. // Si todo va bien enviamos el formulario, pero de lo contrario no.
  33. if ( check_signup == 0 ) {
  34. return false;
  35. } else {
  36. return true;
  37. }
  38. }

3) En la función AJAX recogemos el argumento y lo enviamos a una página PHP, pero aquí el truco está en que no lo hacemos de forma sincrónica, sino asíncrónica, para que el formulario no se siga procesando hasta no haber verificado si el correo existe  😆

  1. function email_verificacion_ajax(comprueba_mail) {
  2. var comprueba_mail;
  3. if (window.XMLHttpRequest) {
  4. ajax_email=new XMLHttpRequest();
  5. } else {
  6. ajax_email=new ActiveXObject("Microsoft.XMLHTTP");
  7. }
  8. ajax_email.onreadystatechange=function() {
  9. if (ajax_email.readyState==4) {
  10. comprueba_mail2=ajax_email.responseText;
  11. }
  12. }
  13. ajax_email.open("GET","verifica_email.php?q="+comprueba_mail, false);
  14. ajax_email.send();
  15. return comprueba_mail2;
  16. }

4. Lo que sigue ya es más simple que un botijo. En un archivo preparamos la conexión...

  1. <?php
  2. $dbhost = 'host';
  3. $dbuser = 'usuario';
  4. $dbpass = 'contraseña';
  5. $dbname = 'base de datos';
  6. $link_id = new mysqli($dbhost,$dbuser,$dbpass,$dbname);
  7. if ($link_id ->connect_error) {
  8. echo "Error de Connexion ($link_id->connect_errno)
  9. $link_id->connect_error\n";
  10. exit;
  11. }
  12. ?>

5. Y en otro nos conectamos a la bbdd y verificamos si el correo existe, en cuyo caso devolvemos 1. De lo contrario, 0.

  1. <?php
  2. require_once('mi_conexion.php');
  3. if (isset($_REQUEST['q']) && $_REQUEST['q'] !="") {
  4. $user_mail = strip_tags(addslashes($_REQUEST['q']));
  5. }
  6. $resultado_search = $link_id->query("SELECT correo FROM usuarios WHERE correo = '$user_mail'");
  7. $row_cnt = $resultado_search->num_rows;
  8. if ($row_cnt==1) {
  9. echo "1";
  10. } else {
  11. echo "0";
  12. }
  13. ?>

6) Ese es el valor que recoge la función AJAX...

  1. ajax_email.open("GET","verifica_email.php?q="+comprueba_mail, false);
  2. ajax_email.send();
  3. return comprueba_mail2;
  4. }

7) ...que a su vez recogemos en el script, poniendo chek en 0 y mostrando el div oculto con el aviso de que ya existe en caso de que el resultado haya sido 1.

  1. if (comprueba_mail2 == 1) {
  2. document.getElementById("campo_oculto").style.display = 'block';
  3. check_signup = 0;

Bueno, no sé si ha quedado claro, pero espero que a alguien le resulte útil. La verdad es que me comí la cabeza un buen rato hasta que encontré la solución.

Bs.

|| Tags: ,

valoración de los lectores sobre Comprobar si existe un correo con AJAX

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4.2 sobre 5 (10 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

4 respuestas a “Comprobar si existe un correo con AJAX

  1. hola interesante el tuto. La verdad pensé encontrarme con un script que me permitiera verificar LA EXISTENCIA DE UNA DETERMINADA DIRECCION DE EMAIL, como podriamos hacer algo asi? se me ocurre algo como enviar un correo electronico a la direccion de email provista por el usuario y verificar la respuesta del servidor (pe: GMAIL o HOTMAIL) pero no se.. porque en caso q el mail exista, entonces el usuario veria un mail enviado…no lo se.. saludos

  2. Gabriel el dijo:

    Fue de mucha ayuda, sirvió muy bien para el proyecto en el que estoy trabajando. Solo revisa que lo que llamas en el onsubmit es “validar_formulario()” pero tu función se llama “validar_formulario_datos_signup()”.