Skip to main content
Actualizar con categoría y producto
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
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>
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>
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>
Origen Enlace
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>