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.

Ryley · Accepted Answer · 2013-07-04 15:51:08Z

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

  });

answered Jul 4, 2013 at 15:51

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Over a year ago

Totally works. Thank you for taking the time to answer my question.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related