Agregar reglas de validación jQuery basadas en atributos de datos en un bucle

Question

Estoy usando el plugin jQuery validation tratando de agregar reglas basadas en los atributos data-. Estoy agregando reglas min/maxlength basadas en data-minlength o data-maxlength. He aquí algunos ejemplos de HTML:

<form> 
    <input name="input1" data-maxlength="5" data-minlength="3" required> 
    <input name="input2" data-maxlength="5" required> 
    <input name="input3" data-minlength="3" required> 
    <button>Submit</button> 
</form> 

que estoy haciendo esto para agregar las reglas y está funcionando muy bien:

$('input[data-minlength]').each(function(){ 
    if ($(this).data('minlength')) { 
     $(this).rules("add", { 
      minlength: $(this).data('minlength') 
     }); 
    } 
}); 

$('input[data-maxlength]').each(function(){ 
    if ($(this).data('maxlength')) { 
     $(this).rules("add", { 
      maxlength: $(this).data('maxlength') 
     }); 
    } 
}); 

Pero yo quería reducir su longitud, por lo que intentó esto y que no está funcionando:

['minlength', 'maxlength'].forEach(function(item){ 
    $('input[data-'+item+']').each(function(){ 
     if ($(this).data(item)) { 
      // alert(item) shows the correct rule name 
      $(this).rules("add", { 
       // Next line fails, but hardcoding a rule name works 
       item: $(this).data(item) 
      }); 
     } 
    }); 
}); 

El error se debe a que $.validator.methods[method] no está definido. De alguna manera, se está transfiriendo el nombre del método incorrecto, aunque alert(item) me dice que el nombre de la regla es correcto.

¿Alguien tiene alguna idea de por qué o tiene una solución alternativa que pueda utilizar para acortar el código de trabajo repetitivo anterior?

Demostración: http://jsfiddle.net/kaVKe/1/

Answer 1

No funciona porque está creando un objeto literal con una nueva propiedad llamada elemento.

¿qué tal esto?

['minlength', 'maxlength'].forEach(function(item){ 
    $('input[data-'+item+']').each(function(){ 
     if ($(this).data(item)) { 
      // alert(item) shows the correct rule name 
      var options = {}; 
      options[item] = $(this).data(item); 

      $(this).rules("add", options); 
     } 
    }); 
}); 

Esto crea un objeto de opciones y agrega la propiedad adecuada que necesita.

Answer 2

¿Por qué no sólo tiene que hacer

$('input').each(function(){ 
    var max = $(this).data('maxlength'); 
    var min = $(this).data('minlength') 
    if (min) { 
     $(this).rules("add", { 
      minlength: min 
     }); 
    } 
    if (max) { 
     $(this).rules("add", { 
      maxlength: max 
     }); 
    } 
}); 

violín aquí http://jsfiddle.net/kaVKe/2/ Su código no funciona, creo que porque no se puede utilizar una variable para un nombre de propiedad

// Next line fails, item is always interpreted as item, not as maxlength/minlength 
item: $(this).data(item) 

Answer 3

Probar:

['minlength', 'maxlength'].forEach(function(item){ 
    $('input[data-'+item+']').each(function(){ 
     if ($(this).data(item)) { 
      var rule = {}; 
      rule[item] = $(this).data(item); 
      $(this).rules("add", rule); 
     } 
    }); 
}); 

Su solución no funciona debido a que en la notación literal de objetos, nombres de propiedades no se interpretarán como variables:

{ 
    item: ... // <-- this one 
}