Validar email con jQuery

En este artículo vamos a ver como validar un campo o input de tipo email de un formulario con jQuery.

En el ejemplo vamos a ver como tras pulsar un botón pasamos a validar el campo email con jQuery.

Fíjate en el código que deberemos añadir en el <head> de nuestra página:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#send').click(function(){
        if($("#email").val().indexOf('@', 0) == -1 || $("#email").val().indexOf('.', 0) == -1) {
            alert('El correo electrónico introducido no es correcto.');
            return false;
        }

        alert('El email introducido es correcto.');
    });
});
</script>

La clave del asunto está en la validación del email, en la condición que no se debe cumplir para no mostrar una alerta y retornar falso.

En nuestro <body> tendremos el formulario con el input y link o botón.

<form id="form" method="post">
    <label>Email:</label>
    <input type="text" name="email" id="email" />
    <a id="send">Enviar</a>
</form>

Si no queda claro puedes ver el ejemplo en funcionamiento.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (6 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

12 respuestas a “Validar email con jQuery”

  1. lcaraves dice:

    Capo puedo ingresar este valor
    jjajaja@.com

    deberia ser un NO correcto.

  2. Eric dice:

    tiene un problema de validacion cuando ingresas antes del @ un punto pasa igual la validacion por ejemplo : programador.web@gamil no deberia pasar y pasa.

  3. Luis Hernando Valverde Lopez dice:

    Excelente aporte José, una inquietud como debe quedar el scrip si se deseara validar dos dominios del correo electrónico, me explico validar que los correos deben ser @hotmail.com o @gmail.com únicamnete? De antemano muchas gracias.

    • Jose Aguilar dice:

      Hola,

      No estoy seguro si habrá algo preparado para ello pero no resultaría complicado hacer una función de validación usando la función explode() de PHP para dividir la cadena por el «@» y comparar la segunda parte del array resultante.

      Saludos

  4. Renzo dice:

    «@.» ese valor lo pasa como valido

  5. juan dice:

    Hola juan todo bien

  6. Esta es la versión más completa que valida lo que indican, puntos y otros casos:

    if (ValidaEmail($(«#Txt_Correo»).val()) == false)
    {
    alert(‘Ingrese un correo válido.’);
    $(«#Txt_Correo»).focus();
    return false;
    }

    function ValidaEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
    }

  7. oswaldo dice:

    Tiene un problema de validación, cuando indico un correo asi > («ejemplo@ejemplo.») , lo marca como un correo valido

  8. josrv089 dice:

    Pues no se cual sea el problema que le vió Gabriel pero el que yo le encontré es que si en el campo yo escribo unicamente .@ eso lo detecta como un correo!!!
    lo que hace es que busca que existan esos caracteres pero no valida que tengan la esctructura correcta
    Saludos

  9. Gabriel dice:

    Muy bueno el Script aunque verdaderamente tiene un problema de validacion…
    Saludos, corrigelo por favor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.