为子集合验证动态添加的输入元素

Question

我正在使用带有不显眼验证的 Asp.Net Core MVC。我有一个表单，它允许为子集合动态添加输入元素，我想在客户端验证中包含这些元素。我已经看到了一些以前的解决方案，例如将 jQuery 验证器规则添加到 ASP 中动态创建的元素，但客户端验证仍然没有发生。

这是我的代码。首先，当单击按钮时，将克隆一个 html 块并将其附加到表单列表中。

<li class="newVideoRow well-sm">
    <div>
        <input type="hidden" name="Videos.Index" value="#" />
        <label>Video Title:</label>
        <input name="Videos[#].VideoTitle" class="videoTitle form-control inline" placeholder="Enter a short title for this video" value="" />
    </div>
    <div>
        <label>Video Link:</label>
        <input name="Videos[#].VideoUri" type="url" class="videoUri form-control inline" value="http://" />
    </div>
</li>

然后，克隆列表项元素的 jQuery 操作 [#] 索引添加验证属性，并可能重新解析不显眼的验证器。

        $('#addNewVideo').click(function(){
            var nr = $('.newVideoRow').clone();
            nr.removeClass('newVideoRow').addClass('videoRow');
            var index = (new Date).getTime();
            $(nr).find('div input').each(function(divIndex, divElement){
                $(divElement).attr('name', $(divElement).attr('name').replace('#', index));
                var inputName = $(divElement).attr('name');
                if ($(divElement).attr('type') != 'hidden'){
                    $(divElement).attr('data-val', 'true');
                    $(divElement).attr('data-val-required', 'A value is required');
                    $(divElement).after('<span asp-validation-for="' + inputName + '" data-valmsg-replace="true" class="text-danger field-validation-valid"></span>');

                    $('form').removeData('validator').removeData('unobtrusiveValidation');
                    //Parse the form again
                    $.validator.unobtrusive.parse($('form'));
                }
                $(divElement).val($(divElement).val().replace('#', index));
            });
            $('#videoList').append(nr);
        });

        $('form').submit(function(e){
            saveSubmitValues(); // copies some other values to hidden fields
        });

如果我将添加的输入留空并提交，html5 url-type 输入会检测到错误，但所需的 VideoTitle 字段不会显示错误。任何人都可以检测到我哪里出错或提出解决方案吗？

Answer 1

它不起作用有两个原因。
1. 您正在使用asp-validation-for，这是在标签助手的服务器端完成的，而不是data-valmsg-for。
2. 需要$.validator.unobtrusive.parse() 在将克隆的元素添加到 DOM后调用。

这是您的代码的工作示例：https : //codepen.io/judowalker/pen/QgRybW