How to use bootstrapValidator for forms that have been added to the home with append()?

Question

JavaScript

There is an html table with input forms input[type=text]. In this table, it is possible to add rows with the same input forms using 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>

The addition goes like this:

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

These fields are checked for emptiness using the bootstrapValidator library .

$('#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 символов'
                        }
                    }
                }
            }
        });
    });

It turns out those fields that it checks are static, and those that are added after append () are not present. I understand that in this situation, the DOM of the elements has changed and the validator does not know about it.

I was thinking in the direction of the on() method. As far as I know it can handle dynamic forms after the DOM has been formed. But I don't have a specific event that I can use as a validation trigger. The button click event for adding a new row in the table is not suitable. Tried to use the method with setTimeout() - doesn't work. I tried to create my own event through trigger (), also there is no result. I also thought about MutationObserver and MutationEvent, but they do not have cross-browser compatibility.

I don't know what else can help solve this problem. Who has any thoughts on this? How can this problem be solved?

Answer 1

Found a solution to the problem on the bootstrapValidator site in the API documentation . It turns out everything is simple and concise.