Dodawanie reguł sprawdzania poprawności jQuery na podstawie atrybutów danych w pętli

Question

Używam wtyczki jQuery validation próbującej dodać reguły na podstawie atrybutów data-. Dodaję reguły min/maxlength na podstawie data-minlength lub data-maxlength. Oto niektóre próbki 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> 

Robię to, aby dodać reguły i to działa dobrze:

$('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') 
     }); 
    } 
}); 

Ale chciałem skrócić go, więc to próbowałem i nie działa:

['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) 
      }); 
     } 
    }); 
}); 

Błąd jest taki, że $.validator.methods[method] jest niezdefiniowany. W jakiś sposób otrzymuję błędną nazwę metody, mimo że alert(item) mówi mi, że nazwa reguły jest poprawna.

Czy ktoś ma pojęcie, dlaczego lub alternatywne rozwiązanie mogę użyć, aby skrócić powtarzający się, działający kod powyżej?

Demo: http://jsfiddle.net/kaVKe/1/

Answer 1

To nie działa, ponieważ tworzysz literał obiektu z nową właściwością o nazwie item.

co z tym?

['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); 
     } 
    }); 
}); 

Spowoduje to utworzenie obiektu opcji i dodanie odpowiedniej właściwości, której potrzebujesz.

Answer 2

Dlaczego nie można po prostu zrobić

$('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 
     }); 
    } 
}); 

skrzypce tutaj http://jsfiddle.net/kaVKe/2/ Twój kod nie działa, myślę, ponieważ nie można użyć zmiennej o nazwie własności

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

Answer 3

Spróbuj:

['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); 
     } 
    }); 
}); 

Twoje rozwiązanie nie działa, ponieważ w obiekcie dosłownym zapisie nazwy właściwości nie będą interpretowane jako zmienne:

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