Question

我正在使用Asp.Net Core MVC进行不显眼的验证。我有一个表单允许动态添加子集合的输入元素，我想在客户端验证中包含这些元素。我已经看到了一些以前的解决方案，例如Adding jQuery validator rules to dynamically created elements in 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.在将克隆元素添加到DOM后，您需要调用$.validator.unobtrusive.parse() 。

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

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

1 个答案: