twitter-bootstrap 动态添加多个字段的引导验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27556313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap validation on dynamically adding multiple fields
提问by user3411746
I am using bootstrap v3.1.1 and I want to validate a form with bootstrap validation but who contains a button to clone 3 fields. With cloning everything works nice, but I can't validate the cloned fields. Here is my HTML Form:
我正在使用 bootstrap v3.1.1，我想使用 bootstrap 验证来验证表单，但该表单包含一个用于克隆 3 个字段的按钮。克隆后一切正常，但我无法验证克隆的字段。这是我的 HTML 表单：
<form id="myForm" action="myAction">
<div class="row" id="line_1">
<div class="col-md-2 form-group">
<input type="text" class="form-control input-sm" id="idFirstField_1" name="firstField[]">
</div>
<div class="col-md-2 form-group">
<input type="text" class="form-control input-sm" id="idSecondField_1" name="secondField[]">
</div>
<div class="col-md-2 form-group">
<input type="text" class="form-control input-sm" id="idThirdField_1" name="thirdField[]">
</div>
</div>
<a id="cloneButton">add line</a>
</form>
In JavaScript file I Have:
在 JavaScript 文件中，我有：
$(document).ready(function () {
var count = 2;
$('#cloneButton').click(function () {
var klon = $('#line_1');
klon.clone().attr('id', 'line_' + (++count)).insertAfter($('#line_1'));
$('#line_' + count).children('div').children('input').each(function () {
$(this).val('');
var oldId = $(this).attr('id').split('_');
$(this).attr('id', oldId[0] + '_' + count);
});
});
//For validating the fields:
$('#myForm').bootstrapValidator({
fields: {
'firstField[]': {
validators: {
notEmpty: {
message: 'Enter a value'
}
}
},
'secondField[]': {
validators: {
notEmpty: {
message: 'Enter a value'
}
}
},
'thirdField[]': {
validators: {
notEmpty: {
message: 'Enter a value'
}
}
}
}
});
});
I now that I must to use somethings like this
我现在必须使用这样的东西
$('#myForm').bootstrapValidator('addField', klon.find('[name="firstField[]"]'));
for each field, but I don't now how correctly do it. Please help me. Thanks!!
对于每个领域，但我现在不知道如何正确地做到这一点。请帮我。谢谢！！
采纳答案by MamaWalter
if you insert the method addFieldin your inputloop, it should work. I also suggest to save your first rowas a template.
如果您addField在input循环中插入该方法，它应该可以工作。我还建议将您的第row一个保存为模板。
var template = $('#line_1').clone();
var options = {
fields: {
'firstField[]': {
validators: {
notEmpty: {
message: 'Enter a value 1'
}
}
},
'secondField[]': {
validators: {
notEmpty: {
message: 'Enter a value 2'
}
}
},
'thirdField[]': {
validators: {
notEmpty: {
message: 'Enter a value 3'
}
}
}
}
};
$('#myForm').bootstrapValidator(options);
$('#cloneButton').click(function () {
var rowId = $('.row').length + 1;
var validator = $('#myForm').data('bootstrapValidator');
var klon = template.clone();
klon.attr('id', 'line_' + rowId)
.insertAfter($('.row').last())
.find('input')
.each(function () {
$(this).attr('id', $(this).attr('id').replace(/_(\d*)$/, "_"+rowId));
validator.addField($(this));
})
});
FIDDLE
小提琴
回答by Vijay Sharma
This Answer not exactly for this question but if someone want to add different field dynamically then they can use this.
这个答案并不完全适用于这个问题，但如果有人想动态添加不同的字段，那么他们可以使用它。
$('#myForm').formValidation('addField', 'fourthField[]', {
validators: {
notEmpty: {
message: 'Enter a value 4'
}
},
});
Syntax : $("#form_name").formValidation("addField",'no of the field',{validation});
句法 ： $("#form_name").formValidation("addField",'no of the field',{validation});
