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

Question

我正在使用 Asp.Net Core MVC 进行不显眼的验证。我有一个表单，允许动态添加子集合的输入元素，我想将它们包含在客户端验证中。我已经看到了一些以前的解决方案，例如Adding jQuery validator rules to dynamically created elements in ASP ，但客户端验证仍然没有发生。

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

<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 类型输入会检测到错误，但所需的 VideoTitle 字段不会显示错误。谁能发现我哪里出了问题或提出解决方案？

Answer 1

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

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