Плагин проверки правильности jQuery, переменное количество входов, отсутствие ошибок в консоли

Question

Я пытаюсь использовать плагин проверки jQuery для проверки формы. Форма, которую я тестирую, динамична, поэтому я заранее не знаю названия полей. Я добавил классы в эти поля и вывел имя.

(function($) { 
    $(function() { 

    var $fields = $('.input-validate-integer'); 

    $('.validate-cart').validate({ 

    // get $fields in the shopping cart 
    groups: function() { 

     var allFields = []; 

     $fields.each(function() { 
     allFields.push($(this).prop('name')); 
     }); 

     allFields = allFields.join(' '); 
     return { 
     number: allFields 
     }; 
    }, 

    rules: function() { 
     var allFields = []; 
     var rules = {}; 

     $fields.each(function() { 
     rules[$(this).prop('name')] = { 
      required: true, 
      number: true 
     }; 
     }); 

     return { 
     rules: rules 
     }; 
    }, 

    messages: function() { 
     var messages = {}; 
     var message = ''; 
     $fields.each(function() { 
     var self = $(this); 
     var key = self.prop('name'); 
     message = self.data('v-message'); 
     messages[key] = message; 
     }); 
     return { 
     messages: messages 
     }; 
    }, 
    debug: true 

    }); 
}); 
})(jQuery); 

Это форма жёстко, которая работает, или, по крайней мере, обжиг:

$('.validate-cart').validate({ 
     groups : { number : 'qty_1844_0 qty_1518_1'}, 
     rules : { 
      qty_1844_0 : { 
       required : true, 
       number : true 
      }, 
      qty_1518_1 : { 
       required : true, 
       number : true 
      } 
     }, 
     messages :{ 
      qty_1844_0 : 'Invalid number', 
      qty_1518_1 : 'Invalid number' 

     }, 
     showErrors : function(error, element){ 
       // todo 
     } 
}); 

HTML-:

<table class="shop_table cart w100"> 
... 
    <tr class="cart_table_item"> 

     <td class="product-description"> 
     <div class="quantity shop-input"> 
       <input type="button" class="minus qbutton" value="-" name="decrement-qty"> 
       <input type="text" name="qty_1844_0" value="1" size="4" class="input-text qty text input-validate-integer valid" data-v-message="Quantity is not valid" maxlength="4"> 
       <input type="button" class="plus qbutton" value="+" name="increment-qty"> 
      </div>         
     </td> 

     <td class="product-quantity"> 
      <div class="quantity shop-input"> 
       <input type="button" class="minus qbutton" value="-" name="decrement-qty"> 
       <input type="text" name="qty_1518_1" value="1" size="4" class="input-text qty text input-validate-integer valid" data-v-message="Quantity is not valid" maxlength="4"> 
       <input type="button" class="plus qbutton" value="+" name="increment-qty"> 
      </div> 
     </td> 
    </tr> 
... 
</table>   

По какой причине ничего не происходит, когда я использую верхний блок кода. Нет ошибок, ничего не отправляет. Я не понимаю.

Спасибо.

Саймон.

Answer 1

У вас есть правильная идея, собирая ваши поля в функциях и затем возвращающие соответствующие объекты. К сожалению, правила принимают только объект как его ценность, а также для групп. jQuery Validate не понимает установку этих значений в функции, поэтому у вас ничего не происходит.

В принципе, весь ваш сбор динамических данных должен произойти до вызова validate. Вам также нужно будет немного вернуть свои объекты правил и сообщений:

var $fields = $('.input-validate-integer'); 

    //figure out groups 
    var allFields = []; 

    $fields.each(function() { 
    allFields.push($(this).prop('name')); 
    }); 

    allFields = allFields.join(' '); 
    var groupsObj = { 
     number: allFields 
    }; 

    //setup rules 
    allFields = []; 
    var rules = {}; 

    $fields.each(function() { 
    rules[$(this).prop('name')] = { 
     required: true, 
     number: true 
    }; 
    }); 



    //setup messages 
    var messages = {}; 
    var message = ''; 
    $fields.each(function() { 
    var self = $(this); 
    var key = self.prop('name'); 
    message = self.data('v-message'); 
    messages[key] = message; 
    }); 

    $('.validate-cart').validate({ 
    groups: groupsObj, 
    rules: rules, 

    messages: messages, 
    debug: true 

    });