jQuery validation plugin, variable number of inputs, no console errors

Question

I am trying to use the jQuery validate plugin to validate a form. The form I'm testing is dynamic so I don't know in advance the names of fields. I have added classes to these fields and deduce the name.

(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);

This is the form hard coded which is working, or at least firing:

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

The 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>        

For whatever reason nothing happens when I use the top block of code. No errors, nothing submits. I don't get it.

Thank you.

Simon.

Answer 1

You have the right idea, with collecting your fields in functions and then returning the appropriate objects. Unfortunately, rules only accepts an object as it's value, and same with groups. jQuery Validate does not understand setting those values to functions, which is why you're having nothing happen.

Basically all your collecting of dynamic data needs to happen before the validate call. You will also have to return a bit less in your rules and messages objects:

  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

  });