对 ASP.NET MVC 中动态添加的字段进行客户端验证的困难

问：

我正在处理一个 ASP.NET MVC 项目，其中我正在使用 JavaScript 将输入字段动态添加到表单中。我集成了 jQuery Validation 插件和 jQuery Unobtrusive Validation 来处理客户端验证。但是，我在让客户端验证为动态添加的字段正常工作方面遇到了困难。 我的视图侧代码：

@using MultistepForm.Models;
@model Formdata
<form method="post" id="forma55" asp-action="submitForm" asp-controller="Home">
    <div class="col-md-12">
        <div id="list" class="repeater-default">
            <div class="row" data-repeater-list="car" id="directors-list">
                <div id="email-0">
                    <label>Email</label>
                    <input class="Email" asp-for="Forms[0].Email" type="text" />
                    <span asp-validation-for="Forms[0].Email"></span>
                    <button onclick="removeelement('email-0')">remoev</button>
                </div>
            </div>
            <div class="form-group mb-0 row">
                <div class="col-sm-12">
                    <a onclick="Additem()" class="btn btn-soft-primary btn-sm" id="add-director">
                        <span class="fas fa-plus"></span> Add Director
                    </a>
                </div>
            </div>
        </div>
    </div>
    <button class="btn btn-primary" onclick="validateall()">submit</button>
</form>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script>

    var count = 0;
    function Additem() {
        debugger
        count = count + 1;
        const listDiv = document.getElementById("directors-list");
        var data = count;
        const directorTemplate = `<div id="email-${data}">
                                <label>Email</label>
                                    <input class="Email" type="text" data-val="true" data-val- required="The Email field is required."
                                    id="Forms_${data}__Email" name="Forms[${data}].Email" value="">
                                     <span class="field-validation-valid" data-valmsg-for="Forms[${data}].Email" data-valmsg-replace="true"></span>
                                    <button onclick="removeelement('email-${data}')">remoev</button>
                                    </div>`;
        listDiv.insertAdjacentHTML("beforeend", directorTemplate);
$("#forma55").removeData("validator");
$("#forma55").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#forma55");

    }
    function removeelement(divId) {
        debugger
        const divToRemove = document.getElementById(divId);

        if (divToRemove) {
            divToRemove.remove();
        }
    }
</script>

我尝试了几种方法，包括使用 .valid（）、.validate（）.form（） 手动触发验证，以及使用 .removeData（） 和 $.validator.unobtrusive.parse（） 重新解析不显眼的验证属性。不幸的是，这些解决方案似乎都没有按预期工作。

我已经验证了动态添加的字段是否具有适当的 data-val-* 属性，并且验证规则是否在模型注释中正确定义。