0

使用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 代码(库 hack 或开箱即用?)

提前感谢

4

1 回答 1

0

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

希望可以帮助某人

于 2017-05-30T15:41:49.743 回答