Question

我已经完成了示例here。但它说明了单个输入字段的动态添加。我必须添加多个动态输入字段。我怎样才能实现它？请参阅此示例jsfiddle 我需要通过点击按钮动态添加表格行中的所有三个字段。

Answer 1

你可以试试这样的事情：

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

在JavaScript文件中，您必须使用函数clone（）并根据需要更改每个输入的ID：

$(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);
        });
    });

//if you want to validate the fields, then you can use this code: 

    $('#myForm').bootstrapValidator({
        fields: {
            'firstField[]': {
                validators: {
                    notEmpty: {
                        message: 'Enter a value'
                    }
                }
            },
            'secondField[]': {
                validators: {
                    notEmpty: {
                        message: 'Enter a value'
                    }
                }
            },
            'thirdField[]': {
                validators: {
                    notEmpty: {
                        message: 'Enter a value'
                    }
                }
            }
        }
    });
});

现在，引导程序验证对克隆字段不起作用，因为你必须在JavaScript文件中使用像这样的东西

$('#myForm').bootstrapValidator('addField', $option); //(from your link http://bootstrapvalidator.com/examples/adding-dynamic-field/ )

但谁将包含所有字段。我现在不知道怎么做。

使用bootstrap验证器动态添加要验证的多个字段

1 个答案: