Foros del Web » Programando para Internet » Jquery »

Problema con función Jquery

Estas en el tema de Problema con función Jquery en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/04/2018, 19:37
 
Fecha de Ingreso: enero-2013
Mensajes: 9
Antigüedad: 11 años, 3 meses
Puntos: 0
Problema con función Jquery

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:
Ver original
  1. <form method="post" action="" onSubmit="return validar();">
  2.     <div>
  3.         <label> Marcado</label>
  4.         <p></p>
  5.  
  6.         <!-- Este es el ID  y varia depediendo de la página que abra para el ejemplo puse 23-->
  7.         <input type="hidden" id="productMainCategoryId" value="23">
  8.  
  9.         <textarea placeholder="marca aca" class="product-message" maxlength="250"  name="marcado"></textarea>
  10.         <small class="float-xs-right">Máximo 200 caracteres</small>
  11.         <p></p>
  12.        
  13.         <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">guardar</button>
  14.     </div>
  15. </form>

Código Javascript:
Ver original
  1. var productMainCategoryId = $('#productMainCategoryId').val();
  2.  
  3. function validar(largo, limite){
  4.     if (largo < limite){
  5.         alert('La formula funciono con ' + largo + '. texto agregado');
  6.         return true;
  7.     }
  8.     else{
  9.         $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  10.         alert('La formula funciono, pero te pasaste de los caracteres');
  11.         return false;
  12.     }
  13. }
  14.  
  15. if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28){
  16.     $("small.float-xs-right").text('Limite 20 caracteres');
  17.  
  18.     //Almacenamos los valores
  19.     nombre = $('.product-message').val();
  20.  
  21.     validar(nombre.length, 20);
  22. }

Última edición por Alexis88; 28/04/2018 a las 20:54 Razón: Highlight
  #2 (permalink)  
Antiguo 28/04/2018, 20:59
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Problema con función Jquery

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:
Ver original
  1. $("form").on("submit", function(event){});

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

Código Javascript:
Ver original
  1. $("form").on("submit", function(event){
  2.     event.preventDefault();
  3. });

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:
Ver original
  1. $("form").on("submit", function(event){
  2.     event.preventDefault();
  3.  
  4.     var productMainCategoryId = $('#productMainCategoryId').val();
  5.  
  6.     if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28){
  7.         $("small.float-xs-right").text('Limite 20 caracteres');
  8.  
  9.         //Almacenamos los valores
  10.         nombre = $('.product-message').val();
  11.  
  12.         validar(nombre.length, 20, this);
  13.     }
  14. });

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:
Ver original
  1. function validar(largo, limite, form){
  2.     if (largo < limite){
  3.         alert('La formula funciono con ' + largo + '. texto agregado');
  4.         form.submit();
  5.     }
  6.     else{
  7.         $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  8.         alert('La formula funciono, pero te pasaste de los caracteres');
  9.     }
  10. }

Todo junto:

Código HTML:
Ver original
  1. <form method="post" action="">
  2.     <div>
  3.         <label> Marcado</label>
  4.         <p></p>
  5.  
  6.         <!-- Este es el ID  y varia depediendo de la página que abra para el ejemplo puse 23-->
  7.         <input type="hidden" id="productMainCategoryId" value="23">
  8.  
  9.         <textarea placeholder="marca aca" class="product-message" maxlength="250"  name="marcado"></textarea>
  10.         <small class="float-xs-right">Máximo 200 caracteres</small>
  11.         <p></p>
  12.        
  13.         <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">guardar</button>
  14.     </div>
  15. </form>

Código Javascript:
Ver original
  1. function validar(largo, limite, form){
  2.     if (largo < limite){
  3.         alert('La formula funciono con ' + largo + '. texto agregado');
  4.         form.submit();
  5.     }
  6.     else{
  7.         $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  8.         alert('La formula funciono, pero te pasaste de los caracteres');
  9.     }
  10. }
  11.  
  12. $(document).ready(function(){ //Para que delegue el evento al cargar el DOM
  13.     $("form").on("submit", function(event){
  14.         event.preventDefault();
  15.  
  16.         var productMainCategoryId = $('#productMainCategoryId').val();
  17.  
  18.         if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28){
  19.             $("small.float-xs-right").text('Limite 20 caracteres');
  20.  
  21.             //Almacenamos los valores
  22.             nombre = $('.product-message').val();
  23.  
  24.             validar(nombre.length, 20, this);
  25.         }
  26.     });
  27. });

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

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 28/04/2018, 22:36
 
Fecha de Ingreso: enero-2013
Mensajes: 9
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problema con función Jquery

Cita:
Iniciado por Alexis88 Ver Mensaje
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:
Ver original
  1. $("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:
Ver original
  1. $("form").on("submit", function(event){
  2.     event.preventDefault();
  3. });

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:
Ver original
  1. $("form").on("submit", function(event){
  2.     event.preventDefault();
  3.  
  4.     var productMainCategoryId = $('#productMainCategoryId').val();
  5.  
  6.     if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28){
  7.         $("small.float-xs-right").text('Limite 20 caracteres');
  8.  
  9.         //Almacenamos los valores
  10.         nombre = $('.product-message').val();
  11.  
  12.         validar(nombre.length, 20, this);
  13.     }
  14. });

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:
Ver original
  1. function validar(largo, limite, form){
  2.     if (largo < limite){
  3.         alert('La formula funciono con ' + largo + '. texto agregado');
  4.         form.submit();
  5.     }
  6.     else{
  7.         $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  8.         alert('La formula funciono, pero te pasaste de los caracteres');
  9.     }
  10. }

Todo junto:

Código HTML:
Ver original
  1. <form method="post" action="">
  2.     <div>
  3.         <label> Marcado</label>
  4.         <p></p>
  5.  
  6.         <!-- Este es el ID  y varia depediendo de la página que abra para el ejemplo puse 23-->
  7.         <input type="hidden" id="productMainCategoryId" value="23">
  8.  
  9.         <textarea placeholder="marca aca" class="product-message" maxlength="250"  name="marcado"></textarea>
  10.         <small class="float-xs-right">Máximo 200 caracteres</small>
  11.         <p></p>
  12.        
  13.         <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">guardar</button>
  14.     </div>
  15. </form>

Código Javascript:
Ver original
  1. function validar(largo, limite, form){
  2.     if (largo < limite){
  3.         alert('La formula funciono con ' + largo + '. texto agregado');
  4.         form.submit();
  5.     }
  6.     else{
  7.         $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  8.         alert('La formula funciono, pero te pasaste de los caracteres');
  9.     }
  10. }
  11.  
  12. $(document).ready(function(){ //Para que delegue el evento al cargar el DOM
  13.     $("form").on("submit", function(event){
  14.         event.preventDefault();
  15.  
  16.         var productMainCategoryId = $('#productMainCategoryId').val();
  17.  
  18.         if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28){
  19.             $("small.float-xs-right").text('Limite 20 caracteres');
  20.  
  21.             //Almacenamos los valores
  22.             nombre = $('.product-message').val();
  23.  
  24.             validar(nombre.length, 20, this);
  25.         }
  26.     });
  27. });

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:
Ver original
  1. <form method="post" action="" onSubmit="return validar();">
  2.   <div>
  3.     <label> Marcado</label>
  4.     <p></p>
  5.     <input type="hidden" id="productMainCategoryId" value="29">
  6.     <textarea placeholder="marca aca" class="product-message" maxlength="250"  name="marcado"></textarea>
  7.     <br>
  8.     <small class="float-xs-right">Máximo 200 caracteres</small>
  9.     <p></p>
  10.     <button class="btn btn-primary float-xs-right" type="submit" name="submitCustomizedData">guardar</button>
  11.   </div>
  12. </form>
Código Javascript:
Ver original
  1. var productMainCategoryId = $('#productMainCategoryId').val();
  2.  
  3.  
  4. if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28) {
  5.     $("small.float-xs-right").text('Limite 20 caracteres');
  6.  
  7.     function validar() {
  8.         //Almacenamos los valores
  9.         limiteCaracter = $('.product-message').val();
  10.  
  11.         //Comprobamos la longitud de caracteres
  12.         if (limiteCaracter.length < 20) {
  13.             alert('La formula funciono. texto agregado');
  14.             return true;
  15.  
  16.         } else {
  17.             $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  18.             alert('La formula funciono, pero te pasaste de los caracteres');
  19.  
  20.             return false;
  21.         }
  22.  
  23.     }
  24.  
  25. } else if (productMainCategoryId == 29 || productMainCategoryId == 30 || productMainCategoryId == 31) {
  26.     $("small.float-xs-right").text('Limite 18 caracteres');
  27.  
  28.     function validar() {
  29.         //Almacenamos los valores
  30.         limiteCaracter = $('.product-message').val();
  31.  
  32.         //Comprobamos la longitud de caracteres
  33.         if (limiteCaracter.length < 18) {
  34.             alert('La formula funciono con 18. texto agregado');
  35.             return true;
  36.  
  37.         } else {
  38.             $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  39.             alert('La formula funciono, pero te pasaste de los caracteres');
  40.  
  41.             return false;
  42.         }
  43.  
  44.     }
  45. } else if (productMainCategoryId == 26) {
  46.     $("small.float-xs-right").text('Limite 18 caracteres');
  47.  
  48.     function validar() {
  49.         //Almacenamos los valores
  50.         limiteCaracter = $('.product-message').val();
  51.  
  52.         //Comprobamos la longitud de caracteres
  53.         if (limiteCaracter.length < 25) {
  54.             alert('La formula funciono con 25. texto agregado');
  55.             return true;
  56.  
  57.         } else {
  58.             $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  59.             alert('La formula funciono, pero te pasaste de los caracteres');
  60.  
  61.             return false;
  62.         }
  63.  
  64.     }
  65. } else if (productMainCategoryId == 24) { //Classic II 15 carac
  66.     $("small.float-xs-right").text('Limite 18 caracteres');
  67.  
  68.     function validar() {
  69.         //Almacenamos los valores
  70.         limiteCaracter = $('.product-message').val();
  71.  
  72.         //Comprobamos la longitud de caracteres
  73.         if (limiteCaracter.length < 15) {
  74.             alert('La formula funciono con 15. texto agregado');
  75.             return true;
  76.  
  77.         } else {
  78.             $("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
  79.             alert('La formula funciono, pero te pasaste de los caracteres');
  80.  
  81.             return false;
  82.         }
  83.  
  84.     }
  85. } else {
  86.     alert('El Id de la página actual es diferente al ID del la formula');
  87. }

De antemano, y muchísimas gracias
  #4 (permalink)  
Antiguo 28/04/2018, 23:59
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Problema con función Jquery

Lo que quiere decir el mensaje es que no debes definir funciones dentro de bloques de condición sino por fuera y, en dichos bloques de condición, solo harías las respectivas llamadas. Justo como en el código que mostraste al inicio.

Por otro lado, ya que utilizas varios formularios y los procesos son similares, te conviene abstraer las instrucciones que se repiten y, mediante el uso de variables, modificarías los límites de las condiciones y mostrarías los mensajes respectivos.

Por ejemplo, supongamos que tengo tres formularios en el mismo documento:

Código HTML:
Ver original
  1. <form class="fdw">
  2.     <label>Ingrese el dato:</label>
  3.     <input type="text" name="x" />
  4.  
  5.     <input type="hidden" name="y" value="1" />
  6.     <input type="submit" />
  7. </form>
  8.  
  9. <form class="fdw">
  10.     <label>Ingrese el dato:</label>
  11.     <input type="text" name="x" />
  12.  
  13.     <input type="hidden" name="y" value="2" />
  14.     <input type="submit" />
  15. </form>
  16.  
  17. <form class="fdw">
  18.     <label>Ingrese el dato:</label>
  19.     <input type="text" name="x" />
  20.  
  21.     <input type="hidden" name="y" value="3" />
  22.     <input type="submit" />
  23. </form>

Ahora, según el valor del <input> oculto, quiero establecer un máximo de caracteres que se puedan escribir en la caja de texto, además de mostrar un mensaje diferente para cada caso. Pues, lo que haría sería:

1. Delegar el evento de envío a todos los formularios que posean la clase "fdw".
2. Definir una función que recibirá como argumentos a los valores que enviaré desde cualquiera de los formularios.
3. Recoger la cantidad de caracteres escritas en la caja de texto y del campo oculto, cualquiera sea el formulario en el que haya pulsado el botón de envío, además del formulario mismo mediante la palabra reservada this.
4. Hacer el llamado a la función y enviar los valores recogidos en el punto anterior.
5. En la función, utilizar una estructura de decisión múltiple para que, de acuerdo con el valor del campo oculto del formulario desde el que se enviaron los datos, se compare la extensión del contenido de la caja de texto con un valor predeterminado y así se pueda mostrar un mensaje de alerta personalizado, además de decidir si se procesará el contenido del formulario o no.

Código Javascript:
Ver original
  1. function evaluar(extension, caso, formulario){
  2.     var limite, valido = true;
  3.  
  4.     switch (caso){
  5.         case 1:
  6.             if (extension > 25){
  7.                 limite = 25;
  8.                 valido = false;
  9.             }
  10.             break;
  11.  
  12.         case 2:
  13.             if (extension > 35){
  14.                 limite = 35;
  15.                 valido = false;
  16.             }
  17.             break;
  18.  
  19.         case 3:
  20.             if (extension > 45){
  21.                 limite = 45;
  22.                 valido = false;
  23.             }
  24.             break;
  25.     }
  26.  
  27.     //Se mostrará el mensaje de alerta con el límite establecido en cualquiera de los casos
  28.     alert("No debe escribir más de " + limite + " caracteres");
  29.  
  30.     //Si el valor de "valido" sigue siendo "true", es decir, si no se excedió el límite de caracteres, se enviarán los datos
  31.     if (valido) formulario.submit();
  32. }
  33.  
  34. $(".fdw").on("submit", function(event){
  35.     event.preventDefault();
  36.  
  37.     var a = $(this).find("[name=x]").val(),
  38.         b = $(this).find("[name=y]").val(),
  39.         c = this;
  40.  
  41.     extension(a, b, c);
  42. });

De esta manera, logramos ahorrar muchas líneas de código y hacerlo más legible y reutilizable.

Y ya que veo que tienes condiciones múltiples, en los case de la estructura de decisión múltiple también puedes usarlas:

Código Javascript:
Ver original
  1. case x != 1 || (y == 2 && z == 3):
  2.     //Instrucciones X
  3.     break;
  4.  
  5. case (x == 4 && y == 5) || z != 6:
  6.     //Instrucciones Y
  7.     break;

O si debe ejecutarse el mismo conjunto de instrucciones para diferentes casos:

Código Javascript:
Ver original
  1. case 1: case 2: case 3:
  2.     //Instrucciones
  3.     break;

Trata de adaptar esto a lo que necesitas.

NOTA: Aunque pude utilizar otro campo oculto para establecer el límite de caracteres y así lograr hacerlo todo con menos líneas, decidí dejarlo así para que veas que, el uso de una condición múltiple (que la necesitarás para esas condiciones múltiples), te puede ayudar a reducir la cantidad de líneas escritas a comparación de las condiciones anidadas.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 29/04/2018 a las 13:25 Razón: Nota
  #5 (permalink)  
Antiguo 29/04/2018, 07:18
 
Fecha de Ingreso: enero-2013
Mensajes: 9
Antigüedad: 11 años, 3 meses
Puntos: 0
Respuesta: Problema con función Jquery

Cita:
Iniciado por Alexis88 Ver Mensaje
Lo que quiere decir el mensaje es que no debes definir funciones dentro de bloques de condición sino por fuera y, en dichos bloques de condición, solo harías las respectivas llamadas. Justo como en el código que mostraste al inicio.

Por otro lado, ya que utilizas varios formularios y los procesos son similares, te conviene abstraer las instrucciones que se repiten y, mediante el uso de variables, modificarías los límites de las condiciones y mostrarías los mensajes respectivos.

Por ejemplo, supongamos que tengo tres formularios en el mismo documento:

Código HTML:
Ver original
  1. <form class="fdw">
  2.     <label>Ingrese el dato:</label>
  3.     <input type="text" name="x" />
  4.  
  5.     <input type="hidden" name="y" value="1" />
  6.     <input type="submit" />
  7. </form>
  8.  
  9. <form class="fdw">
  10.     <label>Ingrese el dato:</label>
  11.     <input type="text" name="x" />
  12.  
  13.     <input type="hidden" name="y" value="2" />
  14.     <input type="submit" />
  15. </form>
  16.  
  17. <form class="fdw">
  18.     <label>Ingrese el dato:</label>
  19.     <input type="text" name="x" />
  20.  
  21.     <input type="hidden" name="y" value="3" />
  22.     <input type="submit" />
  23. </form>

Ahora, según el valor del <input> oculto, quiero establecer un máximo de caracteres que se puedan escribir en la caja de texto, además de mostrar un mensaje diferente para cada caso. Pues, lo que haría sería:

1. Delegar el evento de envío a todos los formularios que posean la clase "fdw".
2. Definir una función que recibirá como argumentos a los valores que enviaré desde cualquiera de los formularios.
3. Recoger la cantidad de caracteres escritas en la caja de texto y del campo oculto, cualquiera sea el formulario en el que haya pulsado el botón de envío, además del formulario mismo mediante la palabra reservada this.
4. Hacer el llamado a la función y enviar los valores recogidos en el punto anterior.
5. En la función, utilizar una estructura de decisión múltiple para que, de acuerdo con el valor del campo oculto del formulario desde el que se enviaron los datos, se compare la extensión del contenido de la caja de texto con un valor predeterminado y así se pueda mostrar un mensaje de alerta personalizado, además de decidir si se procesará el contenido del formulario o no.

Código Javascript:
Ver original
  1. function evaluar(extension, caso, formulario){
  2.     var limite, valido = true;
  3.  
  4.     switch (caso){
  5.         case 1:
  6.             if (extension > 25){
  7.                 limite = 25;
  8.                 valido = false;
  9.             }
  10.             break;
  11.  
  12.         case 2:
  13.             if (extension > 35){
  14.                 limite = 35;
  15.                 valido = false;
  16.             }
  17.             break;
  18.  
  19.         case 3:
  20.             if (extension > 45){
  21.                 limite = 45;
  22.                 valido = false;
  23.             }
  24.             break;
  25.     }
  26.  
  27.     //Se mostrará el mensaje de alerta con el límite establecido en cualquiera de los casos
  28.     alert("No debe escribir más de " + limite + " caracteres");
  29.  
  30.     //Si el valor de "valido" sigue siendo "true", es decir, si no se excedió el límite de caracteres, se enviarán los datos
  31.     if (valido) formulario.submit();
  32. }
  33.  
  34. $(".fdw").on("submit", function(event){
  35.     event.preventDefault();
  36.  
  37.     var a = $(this).find("[name=x]").val(),
  38.         b = $(this).find("[name=y]").val(),
  39.         c = this;
  40.  
  41.     extension(a, b, c);
  42. });

De esta manera, logramos ahorrar muchas líneas de código y hacerlo más legible y reutilizable.

Y ya que veo que tienes condiciones múltiples, en los case de la estructura de decisión múltiple también puedes usarlas:

Código Javascript:
Ver original
  1. case x != 1 || (y == 2 && z == 3):
  2.     //Instrucciones X
  3.     break;
  4.  
  5. case (x == 4 && y == 5) || z != 6:
  6.     //Instrucciones Y
  7.     break;

O si debe ejecutarse el mismo conjunto de instrucciones para diferentes casos:

Código Javascript:
Ver original
  1. case 1: case 2: case 3:
  2.     //Instrucciones
  3.     break;

Trata de adaptar esto a lo que necesitas.

NOTA: Aunque pude utilizar otro campo oculto para establecer el límite de caracteres y así lograr hacerlo todo con menos líneas, decidí dejarlo así para que veas que, el uso de una condición múltiple (que la necesitarás para esas condiciones múltiples), te puede ayudar a reducir la cantidad de líneas escritas.

Hola Alexis,muchas gracias por tu respuesta Solamente estoy usando un solo formualario en una plantilla TPL.
Tengo un grupo de articulos en categorias (submenus) A, B, y C. Mediente una variable de prestashop {$product.id_category_default} obtenido el ID Value de la categoría por ej 23 ó 28 o 31 etc que en el codigo seria el value ,
Los artículos de la categria A admiten en el textarea 20 caracteres, los de la categoría B 18 y la C 25. (en el mismo texarea y en el mismo formulario)
Obtengo el ID
Código:
var productMainCategoryId = $('#productMainCategoryId').val();
del la plantilla insertando un input
Código:
<input type="hidden" id="productMainCategoryId" value="{$product.id_category_default}"
El formulario del texaerea es el mismo para todos los articulos pero el value cambia dependiendo en que submenu este el articulo, entonces podria ser 21, 23, 29, ect.
como la plantilla me muestra la misma info para todos los articulos por ejmplo, máximo 200 caracteres no puedo editarlo directamente en la plantilla.

En resumen anhelo

1. Reemplazar
Código:
<small class="float-xs-right">Máximo 200 caracteres</small>
por el limite que admite ese articulo cuando el cliente abra la el producto que desea comprar
Código:
if (productMainCategoryId == 23 || productMainCategoryId == 27 || productMainCategoryId == 28) {
    $("small.float-xs-right").text('Limite 20 caracteres');
en estos casos la categoría por ejem. Zapatos blusas y pantalones tienen limite de 20
2. Que me limite a X caracteres dependiendo la categoría (submenu) donde este el articulo.
3. Que si la persona escribe demás y clic en submit aparezca un mensaje en rojo que diga que se paso
Código:
$("small.float-xs-right").html("<span style='color: #ff0000;'>Se excede el limite permitido</span>");
El punto 1 debe suceder cuando la persona abre el articulo (producto que quiere comprar).

Por el momento eso lo logre con la el script que hice en la respuesta #3 ¿Que pasa si la uso de esa forma? habría errores mas adelante o tendré problemas ?

Nuevamente gracias y te pido disculpas

Última edición por eridamega; 29/04/2018 a las 07:33
  #6 (permalink)  
Antiguo 29/04/2018, 11:24
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Problema con función Jquery

Supongo que lo de los submenúes son grupos de elementos dentro del formulario, algo como:

Código HTML:
Ver original
  1.     <div>
  2.         <!-- Elementos de la categoría 1 -->
  3.     </div>
  4.     <div>
  5.         <!-- Elementos de la categoría 2 -->
  6.     </div>
  7.     <div>
  8.         <!-- Elementos de la categoría 3 -->
  9.     </div>
  10.     <div>
  11.         <!-- Elementos de la categoría N -->
  12.     </div>
  13. </form>

Ahora, bien. Si en cada grupo tienes un <input> oculto con el id "productMainCategoryId", al momento de tratar de obtener el valor del mismo, siempre va a tomar al que se encuentre en la categoría o submenú 1 ya que, cuando hay más de un elemento con el mismo id en el mismo documento, solo se considera al primero y no a los demás debido a que el id debe ser un valor único en el documento. Además, si en cada categoría o submenú tienes un botón de envío, al estar dentro del formulario que agrupa a las demás categorías o submenúes, se procesará todo lo que se encuentre allí.

Lo ideal sería que tengas un formulario por cada elemento o bien podrías validar el contenido del área de texto de la categoría o submenú en donde se encuentra el botón de envío pulsado mediante la delegación del evento click a los botones de envío (y ya no el evento de envío al formulario) y, luego de cancelar la acción, buscar dentro del elemento padre que representa esa categoría o submenú al área de texto y campo oculto que se encuentre allí. Teniendo esto, podrás realizar la validación solo en dicha categoría o submenú, aunque semánticamente no sea lo adecuado.

Código Javascript:
Ver original
  1. $("[name=submitCustomizedData]").on("click", function(event){
  2.     event.preventDefault();
  3.  
  4.     var categoria = $(this).parent(), //El <div> que contiene al botón pulsado
  5.         textarea = categoria.find(".product-message"),
  6.         hidden = categoria.find("[type=hidden]"),
  7.         mensaje = categoria.find("small");
  8.  
  9.     //El resto de instrucciones
  10. });

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 29/04/2018 a las 13:23 Razón: Corrección de nombre, selector innecesario

Etiquetas: funcion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:59.