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");
});