2

Tengo un input el cual ingreso direcciones de correo electrónico y éste solo me deja ingresar correos que terminan en .com. Me gustaria agregarle otros dominios, además de ese, por ejemplo estos:

  • .cl
  • .net
  • .com.ar

Entre otros.

Dejo el codigo que tengo:

function ValidaEmail(valor, campo){

    var mensaje = "";

    // comprobar los posibles errores

    if (this.value == "") {

    mensaje = "El email no puede estar vacío";

    } else if (this.value.indexOf("@") < 0) {

        mensaje = "El email debe contener una @";

    } else if (this.value.indexOf(".com", this.value.indexOf("@")) < 0){

        mensaje = "El email debe contener .com detras de la @";
    }  

    // mostrar/resetear mensaje (el mensaje se resetea poniendolo a "")
    this.setCustomValidity(mensaje);
}

    //id del input del correo
    var email = document.querySelector("#correo");

    // cuando se cambie el valor del campo o sea incorrecto, mostrar/resetear mensaje

    email.addEventListener("invalid", ValidaEmail);
    email.addEventListener("input", ValidaEmail);

Y este es un ejemplo:

function ValidaEmail(valor, campo){

        var mensaje = "";
  
        // comprobar los posibles errores
  
        if (this.value == "") {
        
        mensaje = "El email no puede estar vacío";
        
        } else if (this.value.indexOf("@") < 0) {
            
            mensaje = "El email debe contener una @";
  
        } else if (this.value.indexOf(".com", this.value.indexOf("@")) < 0){
        
            mensaje = "El email debe contener .com detras de la @";
        }  
  
        // mostrar/resetear mensaje (el mensaje se resetea poniendolo a "")
        this.setCustomValidity(mensaje);
    }
        //ID del input del email
        var email = document.querySelector("#correo");

        // cuando se cambie el valor del campo o sea incorrecto, mostrar/resetear mensaje

        email.addEventListener("invalid", ValidaEmail);
        email.addEventListener("input", ValidaEmail);
#correo{
font-family: 'Segoe UI';
border-radius: 5px;
border-style: solid;
border-width: 1px;
}

#mail{

font-family: 'Segoe UI';

}

button{
font-family: 'Segoe UI';
font-size: 14px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
background-color: white;
border-color: black;
}
<form action="#" method="POST">
<label id="mail">Ingresa un Correo</label>
<br><br>
<input type="text" name="correo" id="correo" required="required">
<br><br>
<button type="submit">GUARDAR</button>
</form>

Como muestro en el ejemplo, solo permite ingresar .com al final del correo

¿Cómo podría agregar otras opciones? Que se pueda ingresar un dominio distinto a .com.

Me gustaría intentar con la función que tengo antes de probar con otra.

1 respuesta 1

1

Buen día colega! Yo te recomendaría mejor validar el input con una expresión regular. Aquí te dejo un ejemplo de una función para ello:

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " is valid!");
    $result.css("color", "green");
  } else {
    $result.text(email + " is not valid!");
    $result.css("color", "red");
  }
  return false;
}

$("#validate").bind("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Ingresa un email:</p>
  <input id='email'>
  <button type='submit' id='validate'>Validar</button>
</form>

<h2 id='result'></h2>

2

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.