bootstrapValidator验证表单插件之动态加载的表单append()

主要代码:

addField()关键点是这个函数。其次是input的name值不能相同。

 $('#xsupplierinfo').bootstrapValidator('addField', 'xnames['+(n-1)+']', {  
                validators: {  
                    notEmpty: {  
                        message: '联系人不能为空'  
                    }  
                }  
            });  
         $("#xsupplierinfo").data('bootstrapValidator').addField('xphones['+(n-1)+']',{  
             validators: {  
                    notEmpty: {  
                        message: '联系方式不能为空'  
                    }  
                }  
=});   

全部代码:

<script>
    n=1
$(document).on("click",".groupbox .addpersonx",function(){
    n++
    $(".groupbox").append('<div class="form-group listgroup addformperson">'
               +' <label for="form2" class="col-sm-2 control-label">联系人:</label>'
                +'<div class="col-sm-10">'
                +'  <input type="text" name="xnames['+(n-1)+']" class="form-control xnamex" id="" value=""  placeholder="请输入名称" >'
                 +' <span class="must">*</span> </div>'              
               +' <label for="form3" class="col-sm-2 control-label"></label>'
              +'  <div class="col-sm-10">'
                 +' <input type="text" name="xphones['+(n-1)+']" class="form-control xphone" id="" value=""  placeholder="请输入联系方式" >'
                +'  <span class="must">*</span> </div>'         
               +' <div class="myadd clearfix">'
                +'  <label for="form3" class="col-sm-2 control-label"></label>'
                 +' <div class="col-sm-10">'
                 +'   <input type="text" name="cz" class="form-control col add gyselect btn-lg fs16 supaddlist addpersonx" readonly="readonly" id="form6" value="+添加联系人">'
                +'  </div>'
              +'  </div>'
              +'</div>');/*新增列表后,新增元素加入到Validator中*/  
         $('#xsupplierinfo').bootstrapValidator('addField', 'xnames['+(n-1)+']', {  
                validators: {  
                    notEmpty: {  
                        message: '联系人不能为空'  
                    }  
                }  
            });  
         $("#xsupplierinfo").data('bootstrapValidator').addField('xphones['+(n-1)+']',{  
             validators: {  
                    notEmpty: {  
                        message: '联系方式不能为空'  
                    }  
                }  
         });   
})
</script>

 

posted @ 2017-06-20 19:39  ~飞阳~  阅读(325)  评论(0)    收藏  举报