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

  });