Problema con función Jquery

[eridamega]

Hola saludos cordiales.
Estoy intentando hacer una función en la cual llevo horas (disculpen mi ignorancia) que adicione un texto infomativo un span, que limite a 20 caracteres dependiendo de un ID, si se pasa que muestre un alert que diga se paso.

La función ya esta hecha pero cuando abre la página aparece un un alert que debe aparecer cuando se da clic en submit y cuando se da submit aparece que me pase del limte sin ser asi.

PostData Los alert son solo informativos, una vez el script sea funcional los quito.

Por adelantado muchas gracias

Código HTML:

<form method="post" action="" onSubmit="return validar();">
    <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:

var productMainCategoryId = $('#productMainCategoryId').val();
 
function validar(largo, limite){
    if (largo < limite){
        alert('La formula funciono con ' + largo + '. 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;
    }
}
 
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);
}