I have defined elements like below and added an custom logic to add more elements on click of + button on input control-'EngVDCategory'.
<div class="VDGroup">
<div class="VDGroupPlaceHolder">
<div class="form-group">
<label class="col-md-4 control-label">Engineering and Vendor data</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<input type="text" id="EngVDCategory" name="EngVDCategory" placeholder="Engineering and Vendor data" class="form-control">
<span class="input-group-addon cursor" id='addButton'><i class="glyphicon glyphicon-plus " ></i></span>
<span class="input-group-addon cursor" id='removeButton'><i class="glyphicon glyphicon-minus" ></i></span>
</div>
</div>
</div>
</div>
</div>
On click of + new element is added below
I also have validators initialized under $(document).ready(function()
$('#filterForm').bootstrapValidator({
fields: {
EngVDCategory: {
validators: {
stringLength: {
min: 10,
max: 100,
message: 'The name must be more than 10 and less than 100 characters long'
}
}
},
EngVDCategory2: {
validators: {
stringLength: {
min: 10,
max: 100,
message: 'The name must be more than 10 and less than 100 characters long'
}
}
}
}
});
On click of submit I would like to validate both elements EngVDCategory and newly added html element EngVDCategory2 as well. But it validates only EngVDCategory element. How to validate the new elements as well ?
validation doesn't work for appended element -'EngVDCategory2 '.
Here is my logic to append
$("#addButton").click(function () {
if( ($('.VDGroup .VDGroupPlaceHolder').length+1) > 5) {
alert("Only maximum of 5 Categories are allowed");
return false;
}
var id = ($('.VDGroup .VDGroupPlaceHolder').length + 1).toString();
$('.VDGroup').append('<div class="VDGroupPlaceHolder"><div class="form-group"><label class="col-md-4 control-label">Engineering and Vendor data</label><div class="col-md-4 inputGroupContainer"><input type="text" id="EngVDCategory' + id + '" name="EngVDCategory' + id + '" placeholder="Engineering and Vendor data ' + id + '" class="form-control" ></div></div></div>');
// validator.addField($(this));
});