bootstrapValidator动态添加视图对添加后的视图进行校验

1.默认需要动态添加多个的视图

<div id="product_base_info">

<form class="productInfoFrom" method="post">

<div id="delBtnDiv" style="display:none"></div>

<div class="row">

<div class="form-group">

<label class="col-sm-2 control-label text-right">产品范围：</label>

<div class="col-sm-8">

<textarea type="text" class="form-control" row="3"

style="display: inline;" name="productScope" placeholder="产品范围" maxlength="1000"></textarea>

</div>

<div class="col-sm-1" style="vertical-align: bottom; height: 100%;">

<a href="javascript:;" id="sameKindProvider">同类供方</a>

</div>

<span class="must col-sm-1">*</span>

</div>

</div>

</form>

</div>

<div id="clone_info"></div>

2.动态克隆添加视图

var divId = "clone"+(index++);

var delBtn = $("<button type='button' class='btn btn-primary delProduct'>删除产品</button>")

var cloneInfo = $("#clone_info");

var div = $("#product_base_info").clone(true);

div.attr("id",divId);

cloneInfo.append(div);

div.find("#delBtnDiv").append(delBtn);

div.find("input[type='text']").changeVal("");

3.添加动态校验

$el5 =div.find("textarea[name='productScope']");

$('.productInfoFrom').bootstrapValidator('addField', $el5);

4.删除动态添加的视图时需要删除校验

$(".delProduct").click(function(){

var delId = $(this).parent().parent().attr("id");

$el5 =$("#"+delId).find("textarea[name='productScope']");

        $('.productInfoFrom').bootstrapValidator('removeField', $el5);

$("#"+delId).remove();

})

5.需要为 < form   id = "productInfoFrom" > 添加校验

$(".productInfoFrom").bootstrapValidator({

message : '无效的值',

feedbackIcons : {

valid : 'glyphicon glyphicon-ok',

invalid : 'glyphicon glyphicon-remove',

validating : 'glyphicon glyphicon-refresh'

},

excluded:[":disabled"],//关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证  

fields : {

// 验证产品范围

productScope:{validators : {notEmpty : {message : '产品范围不能为空'}, stringLength : {min : 1,max : 1000,message : '产品范围长度为1-1000'}}}

}

});