Bootstrap select 要求验证无法正常工作

Question

我们有一个通过模板动态添加的 bootstrap select (Phasentyp)。
模板如下所示：

<div class="form-group">
    <div class="form-row">
        <div class="col-4">
            <form-group asp-for="@projektphaseTemplate.PhasenTypId" asp-horizontal="true" asp-label-suffix=" *" data-none-selected-text required></form-group>
        </div>
    </div>
</div>

添加模板时，select通过JavaScript处理：

// Process the bootstrap selects
projektphase.find('select').each(function(index, element) {
    const el = $(element);

    // Replace name
    let newName = el.attr('name').replace(/projektphaseTemplate/, `Projekt.PPMProjektPhase[${newIndex}]`);
    el.attr('name', newName);

    // Replace ID
    let newId = $(element).attr('id').replace(/projektphaseTemplate/, `Projekt_PPMProjektPhase_${newIndex}_`);
    el.attr('id', newId);

    // Remove all bootstrap-select DOM Stuff for prune select-elements
    el.closest('.bootstrap-select').replaceWith($(element));

    // Reinitialize bootstrap-select
    el.selectpicker({
        noneSelectedText: ''
    });
});

但不幸的是，当使用空选项 selected 保存时，验证不起作用。

“有趣”的是，当我填写其他必填字段并再次保存时，似乎触发了验证，但显示错误消息：

HTML 看起来像这样：

我做错了什么，第一次保存没有触发验证？

提前致谢

Answer 1

更改名称后，您必须将 jquery 的验证重新应用到您的元素。

看这里：jQuery - How to dynamically add a validation rule

Bootstrap select 要求验证无法正常工作

Bootstrap select required validation not working properly

javascript

html

asp.net-core

bootstrap-4

bootstrap-select