Problema con función Jquery

[eridamega]

Iniciado por Alexis88

Cuando se ejecuta el código JavaScript, la variable productMainCategoryId toma el valor del <input> oculto (en este caso, 23) y la condición se evalúa. Como el conjunto de instrucciones se ejecutará si se cumple uno de los tres casos planteados en la condición y ya que el primero de ellos coincide, la variable nombre toma el valor del área de texto (vacía al inicio) y hace un llamado a la función, enviando los valores 0 y 20. En la función, la condición se termina cumpliendo puesto que 0 es menor a 20, por ende, se debe mostrar el primer mensaje de alerta.

No sé si en el documento hay uno o más formularios; pero, suponiendo que fuera el único, te aconsejaría lo siguiente:

1. [URL="http://api.jquery.com/on/"]Delega[/URL] el evento de envío ([URL="https://developer.mozilla.org/en-US/docs/Web/Events/submit"][inline]submit[/inline][/URL]) al formulario mediante jQuery:

Código Javascript:

$("form").on("submit", function(event){});
 

2. Cancela el envío usando el método [URL="https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault"][inline].preventDefault()[/inline][/URL]:

Código Javascript:

$("form").on("submit", function(event){
    event.preventDefault();
});
 

3. Enseguida, obtén el valor de la primera variable y ejecuta la condición. En caso de cumplirse, envía al formulario como tercer argumento utilizando la palabra reservada [URL="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/this"][inline]this[/inline][/URL]:

Código Javascript:

$("form").on("submit", function(event){
    event.preventDefault();
 
    var productMainCategoryId = $('#productMainCategoryId').val();
 
    if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28){
        $("small.float-xs-right").text('Limite 20 caracteres');
 
        //Almacenamos los valores
        nombre = $('.product-message').val();
 
        validar(nombre.length, 20, this);
    }
});
 

4. Por último, en la función, en lugar de retornar valores booleanos, ejecuta el envío (en el caso de que se cumpla la condición de la función) utilizando el método [URL="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit"][inline].submit()[/inline][/URL]:

Código Javascript:

function validar(largo, limite, form){
    if (largo < limite){
        alert('La formula funciono con ' + largo + '. texto agregado');
        form.submit();
    } 
    else{
        $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
        alert('La formula funciono, pero te pasaste de los caracteres');
    }
}
 

Todo junto:

Código HTML:

<form method="post" action="">
    <div>
        <label> Marcado</label>
        <p></p>
 
        <!-- Este es el ID  y varia depediendo de la página que abra para el ejemplo puse 23-->
        <input type="hidden" id="productMainCategoryId" value="23">
 
        <textarea placeholder="marca aca" class="product-message" maxlength="250"  name="marcado"></textarea>
        <small class="float-xs-right">Máximo 200 caracteres</small>
        <p></p>
        
        <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">guardar</button>
    </div>
</form>
 

Código Javascript:

function validar(largo, limite, form){
    if (largo < limite){
        alert('La formula funciono con ' + largo + '. texto agregado');
        form.submit();
    } 
    else{
        $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
        alert('La formula funciono, pero te pasaste de los caracteres');
    }
}
 
$(document).ready(function(){ //Para que delegue el evento al cargar el DOM
    $("form").on("submit", function(event){
        event.preventDefault();
 
        var productMainCategoryId = $('#productMainCategoryId').val();
 
        if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28){
            $("small.float-xs-right").text('Limite 20 caracteres');
 
            //Almacenamos los valores
            nombre = $('.product-message').val();
 
            validar(nombre.length, 20, this);
        }
    });
});
 

Fíjate que quité el onsubmit="... del <form>. Ya no se recomienda seguir trabajando con código JavaScript inline, es decir, insertado en los elementos HTML. Para eso puedes colocarlo en un archivo .js e incluirlo en el documento mediante el elemento <script>.

Hola Muchísimas gracias por tu respuesta has sido de mucha ayuda.
Me saltan varias dudas
La función es para una página prestashop, donde deseo que actúe la función hay varios submit, el de el el textarea de personalizacion el de agregar al carrito entre otros, al hacer clic en los otros submit no se activa la función?
Al cargar la página (sin hacer clic en el submit) debe aparecer este mensaje, y no aparece
que corresponde a

Código:

$("small.float-xs-right").text('Limite 20 caracteres');

3 Por fa podrias revisar esta, esta la hice yo es la que me ha funcionado al 100% no la uso porque el lint me arroja warings pero funciona correctamente

Código:

1 Unnecessary 'else' after disruption. } else {

2 Function statements should not be placed in blocks.Use a function expression or move the statement to the top of the outer function. (uso de función dentro de un if, es obligatorio corregir este warwing??

Esta es mi función hecha con muy poco conocimiento

Código HTML:

<form method="post" action="" onSubmit="return validar();">
  <div>
    <label> Marcado</label>
    <p></p>
    <input type="hidden" id="productMainCategoryId" value="29">
    <textarea placeholder="marca aca" class="product-message" maxlength="250"  name="marcado"></textarea>
    <br>
    <small class="float-xs-right">Máximo 200 caracteres</small>
    <p></p>
    <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">guardar</button>
  </div>
</form>
 

Código Javascript:

var productMainCategoryId = $('#productMainCategoryId').val();
 
 
if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28) {
    $("small.float-xs-right").text('Limite 20 caracteres');
 
    function validar() {
        //Almacenamos los valores
        limiteCaracter = $('.product-message').val();
 
        //Comprobamos la longitud de caracteres
        if (limiteCaracter.length < 20) {
            alert('La formula funciono. texto agregado');
            return true;
 
        } else {
            $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
            alert('La formula funciono, pero te pasaste de los caracteres');
 
            return false;
        }
 
    }
 
} else if (productMainCategoryId == 29 || productMainCategoryId == 30 || productMainCategoryId == 31) {
    $("small.float-xs-right").text('Limite 18 caracteres');
 
    function validar() {
        //Almacenamos los valores
        limiteCaracter = $('.product-message').val();
 
        //Comprobamos la longitud de caracteres
        if (limiteCaracter.length < 18) {
            alert('La formula funciono con 18. texto agregado');
            return true;
 
        } else {
            $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
            alert('La formula funciono, pero te pasaste de los caracteres');
 
            return false;
        }
 
    }
} else if (productMainCategoryId == 26) {
    $("small.float-xs-right").text('Limite 18 caracteres');
 
    function validar() {
        //Almacenamos los valores
        limiteCaracter = $('.product-message').val();
 
        //Comprobamos la longitud de caracteres
        if (limiteCaracter.length < 25) {
            alert('La formula funciono con 25. texto agregado');
            return true;
 
        } else {
            $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
            alert('La formula funciono, pero te pasaste de los caracteres');
 
            return false;
        }
 
    }
} else if (productMainCategoryId == 24) { //Classic II 15 carac
    $("small.float-xs-right").text('Limite 18 caracteres');
 
    function validar() {
        //Almacenamos los valores
        limiteCaracter = $('.product-message').val();
 
        //Comprobamos la longitud de caracteres
        if (limiteCaracter.length < 15) {
            alert('La formula funciono con 15. texto agregado');
            return true;
 
        } else {
            $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
            alert('La formula funciono, pero te pasaste de los caracteres');
 
            return false;
        }
 
    }
} else {
    alert('El Id de la página actual es diferente al ID del la formula');
}
 

De antemano, y muchísimas gracias