Bootstrapvalidator не работает в динамических полях ввода - PullRequest
Новая
       50

Bootstrapvalidator не работает в динамических полях ввода

1 голос
/ 18 октября 2019

Я использую Bootstrapvalidator для проверки формы, которая имеет ряд динамических полей ввода. Количество отображаемых полей ввода зависит от значения выбранного comboBox (select), который затем отображает количество полей ввода через Ajax.

При изменении значения comboBox (select) в первый раз, когда Bootstrapvalidator работает,но при следующем изменении comboBox (выбрать) валидатор Bootstrap не работает.

Есть ли решение для преодоления этой проблемы?

OnChange ComboBox (выбрать) 

$('#jenis_penawaran').on('change', function () {
    var jenis_penawaran = this.value;
    set_bobot_kriteria(jenis_penawaran);

});

Функция вызывается после OnChange 

function set_bobot_kriteria(par) {
    var data = {
        'jenis_penawaran': par,
        'dm': '3',
    };
    $.ajax({
        type: 'POST',
        url: "<?php echo site_url('user/set_bobot'); ?>",
        data: data,
        success: function (result) {

            $('#bobot-kriteria').html(result); //dynamic input field depend on Combobox (select) change
            $('#form_update_bobot').bootstrapValidator({ //The validator does not work after OnChange the second time and after
                fields: {
                    "bobot_kriteria[]": {
                        validators: {
                            notEmpty: {
                                message: 'Bobot tidak boleh kosong'
                            },
                            numeric: {
                                message: 'Bobot harus berupa angka'
                            }
                        }
                    }
                }
            });
        },
    })
}

Пример динамических полей ввода, генерируемых из OnChange ComboBox (select) 

<div class="form-group row m-b-15">
    <label class="col-form-label col-md-3">Nama Kriteria</label>
    <div class="col-md-9">
        <div class="input-group">
            <div class="input-group-append"><span class="input-group-text"><i class="ion-ios-speedometer"></i></span></div>
            <input type="hidden" name="id_bobot_kriteria[]" value="' . $row->id_kriteria . '"/>
            <input type="text" class="form-control" name="bobot_kriteria[]" id="id_bobot_kriteria" />
        </div>
    </div><
</div>
<div class="form-group row m-b-15">
    <label class="col-form-label col-md-3">Nama Kriteria</label>
    <div class="col-md-9">
        <div class="input-group">
            <div class="input-group-append"><span class="input-group-text"><i class="ion-ios-speedometer"></i></span></div>
            <input type="hidden" name="id_bobot_kriteria[]" value="' . $row->id_kriteria . '"/>
            <input type="text" class="form-control" name="bobot_kriteria[]" id="id_bobot_kriteria" />
        </div>
    </div><
</div>

1 Ответ

0 голосов
/ 18 октября 2019

Вам необходимо использовать пассивную форму для привязки слушателей событий: 

$(document).on('change', '#jenis_penawaran', function () {
    var jenis_penawaran = this.value;
    set_bobot_kriteria(jenis_penawaran);
});
...