цикл для создания проверочных скриптов для 10 форм

Question

Есть ли способ использовать цикл для создания 10 из них, увеличивая его везде, где есть "1"

//1
$('#catbudgetform1').validate({
   errorPlacement: function(error, element) {},

   rules: {budgTotal1: { required: true, money:true }},

   submitHandler:function() {
      var theForm = $('#catbudgetform1');
      updateSuccess(theForm,1);
   },

   invalidHandler: function(){
      alert('Valid Number (ex. 1234 or 1234.00) is Required');
   }
});

** Обратите внимание, что # catbudgetform1 и budgTotal1 должны быть # catbudgetform2 и budgTotal2 и так далее и так далее

ИЛИ есть ли способ написать это, чтобы он применял валидацию к каждой из десяти форм независимо, но без написания ее десять раз?

Answer 1

Гораздо более простой подход к этой проблеме - изменить элементы с уникального идентификатора на определенный класс.Это значительно упрощает вашу логику, потому что класс позволяет группировать то, что вы хотите здесь.

$('.catbudgetform').each(function (index) {
   var theRules = {};
   theRules['budgTotal' + index] = { required: true, money:true };

   $(this).validate({
       errorPlacement: function(error, element) {},

       rules: theRules,

       submitHandler:function() {
          var theForm = $(this);
          updateSuccess(theForm, index);
       },

       invalidHandler: function(){
          alert('Valid Number (ex. 1234 or 1234.00) is Required');
       }  
   });
});

Answer 2

Я бы попытался сделать это только с классами, без идентификаторов, и в submitHandler используйте $(this).closest("form") вместо $("#catbudgetform1")

$('.catbudgetform').each(function(i){
   $(this).validate({
       errorPlacement: function(error, element) {},

       rules: {"budgTotal" + i: { required: true, money:true }},

       submitHandler:function() {
          var theForm = $(this).parents("form");
          updateSuccess(theForm,i);
       },

       invalidHandler: function(){
          alert('Valid Number (ex. 1234 or 1234.00) is Required');
       }
    });
});

Answer 3

Я бы попытался сделать что-то наподобие того, что предложил Флёкси, но, похоже, у вас уже есть код, в котором этот индекс хардкодирован, следующее будет делать:

for (var i=1; i <= 10; i++) {
    // Freeze the loop variable with a self calling function
    (function(index){
        // Can't do a literal object if the property is dynamic
        var rules = {};
        rules['budgTotal'+index] = { required: true, money:true };
        $('#catbudgetform' + index).validate({

            errorPlacement: function(error, element) {},

            rules: rules,

            submitHandler:function() {
                var theForm = $('#catbudgetform' + index);
                updateSuccess(theForm,index);
            },

            invalidHandler: function(){
                alert('Valid Number (ex. 1234 or 1234.00) is Required');
            }
        });
    })(i); // Passing the loop variable into the anonymous self calling function
}