1

Estoy presentando un problema con un alert de validación de correo que se mostrara en caso de que el mensaje que se ingrese no corresponda a un correo valido, quisiera que al momento de presionar cualquier tecla desaparezca el alert

El siguiente es un pequeño snippet que pueden tomar como referencia de lo que hablo.

function EnviarInformacion() {
  var Contacto = $("#Contacto").val();
  const alerta = document.getElementById("alert");
  // Eliminar clase antes de validar
  alerta.classList.remove("show")
  if (/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(Contacto)) {
    //Codigo de validacion aquí
  } else {
    // Agregar clase cuando es un correo inválido
    alerta.classList.add("show")
  }
}
.alert {
  opacity: 0;
  transition: all 0.5s ease;
  max-height: 0;
  /* Comienza con altura en cero */
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.show {
  opacity: 1;
  max-height: 150px;
  /* Altura adaptable a contenido */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
                                    <div class=" col-sm-12 col-xs-12 col-md-12 col-lg-12">
                                        <br /><br />
                                        <p>
                                            <span class="ContenidoContactoMensaje">Ingresa tu correo
                                            </span>
                                        </p>
                                    </div>
                                    <br />

                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 alinearDerecha">
                                        <div class="col-sm-6 col-xs-12 col-md-6 col-lg-6 row2">

                                            <input type="email" name="Contacto" id="Contacto" value="" size="50" class="form-control" />
                                            <div id="alert" class="alert alert-danger" style="font-family: 'Lettera Text Std';">Favor de ingresar una cuenta de correo válida.</div>
                                        </div>
                                        <div class="col-sm-6 col-xs-12 col-md-6 col-lg-6 row2">
                                            <button class="EnviarContactoDetalleProducto btn-lg" onclick="EnviarInformacion(1,1)"> Enviar</button>
                                        </div>
                                        <br />
                                    </div>

                                </div>

Lo anterior es con el objetivo de que al momento de que la persona escribió un texto cualquier pues no le permita enviar y al hacerlo se genere el alert pero si la persona se dio cuenta de que es necesario un correo valido pues va a eliminar lo que escribió y va escribir nuevamente uno totalmente valido. Espero haber sido lo suficientemente claro con mi pregunta.

Actualización:

Agrego código actual en donde incluyo validaciones pero no vi el caso necesario de agregarlo a mi pregunta inicial, adicional a este código agrego al final la validación que me aportan en una de las respuestas.

function EnviarInformacion(Categoria, Producto) {
    var Nombre_Producto = "";
    var Nombre_Categoria = "";
    let Contacto = $("#Contacto").val();
    $("#alert").removeClass("show");
    if (/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(Contacto)) {
        if (Categoria == 1) {
            Nombre_Categoria = "Categoria 1";
            if (Producto == 1) {
                Nombre_Producto = "Produc 1";
            }
            if (Producto == 2) {
                Nombre_Producto = "Produc 2";
            }
            if (Producto == 3) {
                Nombre_Producto = "Produc 3";
            }
            if (Producto == 4) {
                Nombre_Producto = "Produc 4";
            }
            if (Producto == 5) {
                Nombre_Producto = "Produc 5";
            }
            if (Producto == 6) {
                Nombre_Producto = "Produc 6";
            }
            if (Producto == 7) {
                Nombre_Producto = "Produc 7";
            }
            if (Producto == 8) {
                Nombre_Producto = "Produc 8";
            }
        } else if(Categoria == 2) {
            Nombre_Categoria = "Categoria 2";

            if (Producto == 1) {
                Nombre_Producto = "Prod 1";
            }
            if (Producto == 2) {
                Nombre_Producto = "Prod 2";
            }
            if (Producto == 3) {
                Nombre_Producto = "Prod 3";
            }
            if (Producto == 4) {
                Nombre_Producto = "Produ 4";
            }
        } else {
            Nombre_Categoria = "Categoria 3";
            if (Producto == 1) {
                Nombre_Producto = "Prod 1";
            }
            if (Producto == 2) {
                Nombre_Producto = "Prod 2";
            }
            if (Producto == 3) {
                Nombre_Producto = "Prod 3";
            }
            if (Producto == 4) {
                Nombre_Producto = "Prod 4";
            }
            if (Producto == 5) {
                Nombre_Producto = "Prod 5";
            }
            if (Producto == 6) {
                Nombre_Producto = "Prod 6";
            }
        }
        if (Nombre_Producto != "" && Contacto!="") {
            $.ajax({
                type: "POST",

                url: "Test.php",
                data: JSON.stringify({
                    Categoria: Categoria,
                    Nombre_Categoria: Nombre_Categoria,
                    Nombre_Producto: Nombre_Producto,
                    Contacto: Contacto

                }),
                dataType: 'JSON',
                method: 'post',
                contentType: "application/json",
                success: function (result) {
                    data = $.parseJSON(result.d)
               
                    if (data.length) {

                        for (i = 0; i < data.length; i++) {
                            var Resultado = data[i]['Resultado'];
                        }
                        alert("Muestra mensaje si se envia.")
                        window.location.reload(); 
                    }
                }
            });
        }
    } else {
        $("#alert").addClass("show");
    }
}

// Escuchar cambios en campo
$('#Contacto').on('input', function () {
    $("#alert").removeClass("show");
});
2
  • Por favor edita la pregunta para agregar el HTML que corresponde a la actualización.
    – Triby
    Commented el 19 abr. 2021 a las 16:30
  • @Triby Por favor valida nuevamente en mi pregunta, actualice mi HTML correspondiente a la ultima actualización.
    – John Doe
    Commented el 19 abr. 2021 a las 16:36

1 respuesta 1

2

Solo necesitas agregar una función para escuchar cambios en el campo, el evento input podría ser suficiente. Por cierto, cambié la forma de agregar y eliminar clases, usando la API de jQuery porque no tiene sentido mezclar con Javascript puro.

function EnviarInformacion(Categoria, Producto) {
    // Evitar envío de formulario
    event.preventDefault();
    
    let Nombre_Producto = "";
    let Nombre_Categoria = "";
    let Contacto = $("#Contacto").val();
    $("#alert").removeClass("show");
    if (/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(Contacto)) {
        // Simplificar nombre de categoría y producto
        if(Categoria >= 1 && Categoria <= 3) {
            Nombre_Categoria = 'Categoría ' + Categoria;
            if(
                (Categoria == 1 && Producto >= 1 && Producto <= 8)
                || (Categoria == 2 && Producto >= 1 && Producto <= 4)
                (Categoria == 3 && Producto >= 1 && Producto <= 6)
            ) {
                Nombre_Producto = 'Prod ' + Producto;
            }
        }

        if (Nombre_Producto != "" && Contacto!="") {
            $.ajax({
                type: "POST",

                url: "Test.php",
                data: JSON.stringify({
                    Categoria: Categoria,
                    Nombre_Categoria: Nombre_Categoria,
                    Nombre_Producto: Nombre_Producto,
                    Contacto: Contacto

                }),
                dataType: 'JSON',
                method: 'post',
                contentType: "application/json",
                success: function (result) {
                    data = $.parseJSON(result.d)
               
                    if (data.length) {

                        for (i = 0; i < data.length; i++) {
                            var Resultado = data[i]['Resultado'];
                        }
                        alert("Muestra mensaje si se envia.")
                        window.location.reload(); 
                    }
                }
            });
        }
    } else {
        $("#alert").addClass("show");
    }
}

// Escuchar cambios en campo
$('#Contacto').on('input', function () {
    $("#alert").removeClass("show");
});
.alert {
    opacity: 0;
    transition: all 0.5s ease;
    max-height:0; /* Comienza con altura en cero */
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.show {
    opacity: 1;
    max-height: 150px; /* Altura adaptable a contenido */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
                                    <div class=" col-sm-12 col-xs-12 col-md-12 col-lg-12">
                                        <br /><br />
                                        <p>
                                            <span class="ContenidoContactoMensaje">Ingresa tu correo
                                            </span>
                                        </p>
                                    </div>
                                    <br />

                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 alinearDerecha">
                                        <div class="col-sm-6 col-xs-12 col-md-6 col-lg-6 row2">

                                            <input type="email" name="Contacto" id="Contacto" value="" size="50" class="form-control" />
                                            <div id="alert" class="alert alert-danger" style="font-family: 'Lettera Text Std';">Favor de ingresar una cuenta de correo válida.</div>
                                        </div>
                                        <div class="col-sm-6 col-xs-12 col-md-6 col-lg-6 row2">
                                            <button class="EnviarContactoDetalleProducto btn-lg" onclick="EnviarInformacion(1,1)"> Enviar</button>
                                        </div>
                                        <br />
                                    </div>

                                </div>

8
  • Esto parece no funcionar para mi, podemos validar con otro método la eliminación del alert
    – John Doe
    Commented el 19 abr. 2021 a las 16:03
  • ¿@JohnDoe, a qué te refieres con que no funciona para ti? En el fragmento de código sí funciona.
    – Triby
    Commented el 19 abr. 2021 a las 16:05
  • Al ejecutarlo en mi código no funciona, se muestra el alert al momento de Enviar caracteres que no corresponda a un correo según la validación pero al escribir nuevamente no se oculta el alert
    – John Doe
    Commented el 19 abr. 2021 a las 16:09
  • @JohnDoe, entonces debes editar tu pregunta para poner el código actual, solo así podemos tratar de ver lo que está fallando.
    – Triby
    Commented el 19 abr. 2021 a las 16:13
  • Agregue el código completo de la validación que publique en mi pregunta inicial, solo que en un comienzo no lo vi necesario, pido una disculpa.
    – John Doe
    Commented el 19 abr. 2021 a las 16:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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