Cómo verificar si un correo existe con jQuery keyup()

Question

Cómo verificar si un correo existe con jQuery keyup()

17 oct 2012, 14:17:29

Vistas: 17.9K

Votos: 1

He configurado una función de retraso con jQuery keyup para verificar el correo electrónico ingresado en un campo de entrada.

Funciona correctamente después de probarlo con un alert('¡Tecla presionada!');

Pero quiero que muestre, por ejemplo, 'Sí, este correo está asociado a un usuario' O 'Lo sentimos, este correo no está en nuestra base de datos' sin enviar ninguna solicitud de página.


    var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();
    $('input').keyup(function() {
        delay(function(){
            // verificar si el correo existe y mostrar resultado
            // ¿Puedo usar PHP aquí?
            // ¿Puede ayudar AJAX/JSON?
        }, 500 );
    });

Intenté verificarlo con PHP pero esto se ejecuta antes que el jQuery, que es donde almaceno mi variable de correo.

Después de algunas búsquedas en Google, parece que esto podría no ser posible. ¿Alguien puede confirmarlo o ofrecer una solución?

Gracias

zilj

373

jquery base de datos

Comentarios

Dado que el evento keyup se dispara cada vez que se suelta una tecla del teclado, recomendaría usar el evento blur que solo se activa cuando el usuario pasa al siguiente campo. Deberías poder vincular el evento a una llamada ajax que verificará la existencia de la dirección de correo electrónico.

nvwd

17 oct 2012 14:36:46

Esto no es específico de WordPress.

Joseph Leedy

17 oct 2012 15:13:22

Quizás no estrictamente, pero mi intención original era usar <?php if ( email_exists($email) ) { . . . } ?> que es específico de WordPress. Así que supongo que podrías generalizar mi pregunta como, ¿puedo usar jquery/json/ajax con if ( email_exists($email).

zilj

17 oct 2012 15:52:14

Todas las respuestas a la pregunta

Comentarios

Estaba llegando a la conclusión de que necesitaba usar AJAX, esta parece una buena solución. Voy a probarlo ahora mismo.

zilj

17 oct 2012 15:55:00

Lo siento, soy un poco novato con AJAX. ¿El código jQuery debería estar dentro de mi función keyup? Añadí un if para verificar si el email existe como una prueba simple, a mi email_check.php que devuelve true o false. Esto no está bien, ¿verdad? if ($email) {$response->result = true;} else {$response->result = false;}

zilj

17 oct 2012 16:14:23

Disculpa, ya he resuelto esto gracias a tu código. Olvidé que el url: necesitaba tener en cuenta la URL del tema.

zilj

17 oct 2012 16:23:42

Rayos. Desafortunadamente, dentro de mi archivo email_check.php quería ejecutar if ( email_exists($email) ) y luego retornar el valor verdadero o falso. Está causando un error en el servidor y no logro hacerlo funcionar. Lo probé en la página de origen y funciona. ¿Por qué no dentro de la página PHP objetivo?

zilj

17 oct 2012 17:09:07

En respuesta a tus preguntas sobre dónde usarlo, simplemente úsalo dentro de document ready, no es necesario ponerlo en tu función keyup, esta función que he escrito hace exactamente eso (básicamente on change).

En cuanto al error del servidor que estás obteniendo en la página PHP, ¿puedes proporcionar un enlace? ¿Puedes mostrar el código dentro de la función email_exists?

Mateusz Michalik

18 oct 2012 04:48:22

Mostrar los 1 comentarios restantes

Mateusz Michalik 86 · Accepted Answer · 2012-10-17T14:34:24Z

Yo usaría una solicitud AJAX a un script PHP que realice la búsqueda, que podría verse algo así en el lado de jQuery después de que el documento esté listo:

// jquery
$('#email-input').live('change', function() {
    //solicitud ajax
    $.ajax({
        url: "email_check.php",
        data: {
            'email' : $('#email-input').val()
        },
        dataType: 'json',
        success: function(data) {
            if(data.result) {
                alert('¡El correo existe!');
            }
            else {
                alert('¡El correo no existe!');
            }
        },
        error: function(data){
            //error
        }
    });
});

Con el ejemplo anterior, tu PHP tendría que devolver datos JSON una vez que haya realizado la comprobación del correo basándose en la dirección, por ejemplo, tu email_check.php contendría:

// obtener el correo pasado por AJAX
$email = $_GET['email'];

// realizar la comprobación
if ( email_exists($email) ) {
    $response->result = true;
}
else {
    $response->result = false;
}

// imprimir json
echo json_encode($response);

¡Espero que esto ayude!