Bootstrapvalidator 在动态输入字段中不起作用

Posted 2023-05-08

【中文标题】Bootstrapvalidator 在动态输入字段中不起作用

【英文标题】：Bootstrapvalidator does not work in dynamic input fields

【发布时间】：2020-02-15 16:45:12

【问题描述】：

我使用 Bootstrapvalidator 来验证具有多个动态输入字段的表单。显示的输入字段数量取决于选中的组合框（select）的值，然后通过Ajax显示多个输入字段。

在第一次Bootstrapvalidator工作时comboBox（select）值的变化，但在下一次comboBox（select）变化时，Bootstrap验证器不起作用。

有解决这个问题的办法吗？

OnChange 组合框（选择）

$('#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】：

您需要使用被动形式来绑定事件监听器：

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

【讨论】：

id有变化吗？

不，没有id变化