function EnviarInformacion(Categoria, Producto) {
let// ContactoEvitar =envío $("#Contacto")de formulario
event.valpreventDefault();
//
Eliminar clase antes delet validarNombre_Producto = "";
let Nombre_Categoria = "";
let Contacto = $("#Contacto").val();
$("#alert").removeClass("show");
if (/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(Contacto)) {
//Codigo Simplificar nombre de validacioncategoría aquí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;
}
else }
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",
Agregar clase cuando es un correo inválido 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">
<span class="ContenidoContactoMensaje">Ingresa tu correo
Ingresa tu correo<br </>span>
</span>p>
</p>div>
</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"type="email" name="Contacto" id="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(1,1)"> Enviar</button>
</div>
<br />
</div>
</div>