Skip to main content
1 de 2
Triby
  • 25.2k
  • 3
  • 18
  • 36

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() {
    let Contacto = $("#Contacto").val();
    // Eliminar clase antes de validar
    $("#alert").removeClass("show");
    if (/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(Contacto)) {
        //Codigo de validacion aquí
    } else {
        // Agregar clase cuando es un correo inválido
        $("#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<br />
                                        </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="text" name="Contacto" value="" size="50" class="form-control" id="Contacto" />
                                        <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()"> Enviar</button>
                                    </div>
                                    <br />
                                </div>

                            </div>

Triby
  • 25.2k
  • 3
  • 18
  • 36