Как использовать bootstrapValidator для форм которые были добавлены в дом с помощью append()?

Question

Рамиль @rshaibakov

Web-разработчик

Как использовать bootstrapValidator для форм которые были добавлены в дом с помощью append()?

Есть html таблица с формами ввода input[type=text]. В данной таблице есть возможность добавлять с помощью append() строки с такими же формами ввода.

<form action="/department/save" method="post" id="save_department">
<button type="button" class="btn btn-success" id="add-point"><i class="fa fa-plus"></i> Добавить</button>
<table class="table table-striped departments">
        <tr>
            <th>Название</th>
            <th>Логин</th>
            <th>Пароль</th>
        </tr>
            <tr class="item-department" >
                <td class="form-group"><input type="text" class="form-control" name="department_name[]" ></td>
                <td class="form-group"><input type="text" class="form-control" name="department_login[]" ></td>
                <td class="form-group"><input type="text" class="form-control" name="department_password[]" ></td>
            </tr>
    </table>
    <button type='submit' class="btn btn-success"><i class="fa fa-save"></i> Сохранить</button>
</form>

Добавление происходит так:

$(document).on('click', '#add-point', department.add);

function add() {
        $('.departments').append('<tr class="item-department">' +
            '<td class="form-group"><input type="text" class="form-control" name="department_name[]"></td>' +
            '<td class="form-group"><input type="text" class="form-control" name="department_login[]"></td>' +
            '<td class="form-group"><input type="text" class="form-control" name="department_password[]"></td>' +
            '</tr>'
        );
    }

Данные поля проверяются на пустоту с помощью библиотеки bootstrapValidator.

$('#save-department').submit(function() {
        $(this).bootstrapValidator({
            fields: {
                'department_name[]': {
                    validators: {
                        notEmpty: {
                            message: 'Необходимо ввести название точки продаж'
                        }
                    }
                },
                'department_login[]': {
                    validators: {
                        notEmpty: {
                            message: 'Необходимо ввести логин точки продаж'
                        }
                    }
                },
                'department_password[]': {
                    validators: {
                        notEmpty: {
                            message: 'Необходимо ввести пароль точки продаж'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'Пароль должен быть не меньше 6 символов'
                        }
                    }
                }
            }
        });
    });

Получается те поля, что статичны он проверяет, а те, что добавлены после append() нет. Я понимаю что в данной ситуации DOM элементов изменился и валидатор об этом не знает.

Я думал в сторону метода on(). Насколько я знаю он может обрабатывать динамические формы и после того, как DOM сформирован. Но у меня нет конкретного события которое я могу использовать в качестве триггера на валидацию. Событие клика кнопки для добавления новой строки в таблице не подходит. Пробовал использовать способ с setTimeout() - не работает. Пробовал создавать свое событие через trigger(), тоже нет результата. Думал еще об MutationObserver и MutationEvent, но у них нет кроссбраузерности.

Не знаю что еще может помочь решить эту проблему. У кого какие мысли есть на этот счет? Как можно решить данную проблему?