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:

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

    $(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!!

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:

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

    $(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!!

• javascript
• jquery
• twitter-bootstrap
• validation

2 Answers 2

if you insert the method addField in your input loop, it should work. I also suggest to save your first row as a template.

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

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