2017-05-30 33 views
0

使用https://github.com/DubFriend/jquery.repeater,我必须在我的中继器模板中添加字段验证消息。使用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代码(库黑客或开箱?)

感谢

回答

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

希望能帮助别人