Update attributes for other balise than input with jquery.repeater ? (usefull for ajax validation message)

Question

using https://github.com/DubFriend/jquery.repeater, i have to add fields validation message in my repeater template.

So the message span container data-validate-for attribute must be updated at the same time as his corresponding input name because my ajax framework search this to inject the error message if field is not correctly filled

below the html source code

<div data-repeater-list="group-a">

<!-- repeater template -->
<div data-repeater-item style="display:none;">

<label for="date">Date</label>
<input type="date" name="date" /> 
<span class="error_message" data-validate-for="date"></span>

<label for="amount">Amount</label>
<input type="text" name="amount" />
<span class="error_message" data-validate-for="amount"></span>

<input data-repeater-delete type="button" value="delete" />
</div>

<!-- first group displayed -->
<div data-repeater-item>

 <label for="date">Date</label>
 <input type="date" name="date" /> 
 <span class="error_message" data-validate-for="date"></span>

 <label for="amount">Amount</label>
 <input type="text" name="amount" />
 <span class="error_message" data-validate-for="amount"></span>

 <input data-repeater-delete type="button" value="delete" />
 </div>

</div>

expected values after user adding item

<!-- first group displayed -->
<div data-repeater-item>

 <label for="date">Date</label>
 <input type="date" name="group[1][date]" /> 
 <span class="error_message" data-validate-for="group[1][date]"></span>

 <label for="amount">Amount</label>
 <input type="text" name="group[1][amount]" />
 <span class="error_message" data-validate-for="group[1][amount]"></span>

<input data-repeater-delete type="button" value="Supprimer" />
</div>

Is it possible using native repeater library functions to update other attributes like data-validate-for='same_input_name' or i need to add jquery code somewhere (library hack or out of the box ?)

thanks by advance

Answer 1

i add this code in jquery.repeater.js version 1.2.1

    ....
    var setIndexes = function ($items, groupName, repeaters) {

        $items.each(function (index) {

            var $item = $(this);

            $item.data('item-name', groupName + '[' + index + ']');
            $filterNested($item.find('[name]'), repeaters)
            .each(function () {

                var $input = $(this);

                // match non empty brackets (ex: "[foo]")
                var matches = $input.attr('name').match(/\[[^\]]+\]/g);

                var name = matches ?
                    // strip "[" and "]" characters
                    last(matches).replace(/\[|\]/g, '') :
                    $input.attr('name');

                var newName = groupName + '[' + index + '][' + name + ']' +
                    ($input.is(':checkbox') || $input.attr('multiple') ? '[]' : '');

                $input.attr('name', newName);

                $foreachRepeaterInItem(repeaters, $item, function (nestedFig) {
                    var $repeater = $(this);
                    setIndexes(
                        $filterNested($repeater.find('[data-repeater-item]'), nestedFig.repeaters || []),
                        groupName + '[' + index + ']' +
                                    '[' + $repeater.find('[data-repeater-list]').first().data('repeater-list') + ']',
                        nestedFig.repeaters
                    );
                });
            });
            //***** START MODIFICATION
            if (fig.errorMessage) {

                $filterNested($item.find('.' + fig.errorMessageClass), repeaters)
                    .each(function () {

                        var $span = $(this);

                        // match non empty brackets (ex: "[foo]")
                        var matches = $span.attr('data-validate-for').match(/\[[^\]]+\]/g);

                        var dataValidateFor = matches ?
                            // strip "[" and "]" characters
                            last(matches).replace(/\[|\]/g, '') :
                            $span.attr('data-validate-for');                        

                        var newDataValidateFor = groupName + '[' + index + '][' + dataValidateFor + ']' +
                            ($span.is(':checkbox') || $span.attr('multiple') ? '[]' : '');                        

                        $span.attr('data-validate-for', newDataValidateFor);

                    });
            }
            //***** END MODIFICATION
        });

        $list.find('input[name][checked]')
            .removeAttr('checked')
            .prop('checked', true);
    };
    ....

and in repater.js config file i add

    // (Optional)
    // manage fields validation message
    // 
    errorMessage: true,
    errorMessageClass: 'error_message',

hope that can help someone