Problema con función Jquery

[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. Delega el evento de envío (submit) al formulario mediante jQuery:

Código Javascript:

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

2. Cancela el envío usando el método .preventDefault():

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 this:

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 .submit():

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>.