是否使用jquery.repeater更新输入以外的应答器属性？(适用于ajax验证消息)

Question

使用https://github.com/DubFriend/jquery.repeater，我必须在我的中继器模板中添加字段验证消息。

因此，消息跨度容器data-validate-for属性必须与其对应的输入名称同时更新，因为我的ajax框架会对其进行搜索，以便在字段未正确填充的情况下注入错误消息

下面是html源代码

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

用户添加项目后的期望值

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

有没有可能使用原生中继库函数来更新其他属性，比如data-validate-for='same_input_name'，或者我需要在某个地方添加jquery代码(库中的或者开箱即用?)

提前感谢

Answer 1

我将此代码添加到jquery.repeater.js版本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);
    };
    ....

在repater.js配置文件中我添加了

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

希望这能帮助到一些人