Question

如何将动态添加的控件添加到验证中？

<div class="editor-field">
    @*@Html.EditorFor(model => model.Middlename)*@
    <div id="x"></div>

    <script type="text/javascript">

        $(function () {

            var newTextBoxDiv = $(document.createElement());

            newTextBoxDiv.html('<input type="text" name="Middlename" id="Middlename" width="100" data-val="true" data-val-required="The Middleneim field is required." />');

            newTextBoxDiv.appendTo('#x');
        });

    </script>

    @Html.ValidationMessageFor(model => model.Middlename)
</div>

我注意到当我不使用ready函数时，即

<script type="text/javascript">


var newTextBoxDiv = $(document.createElement());

newTextBoxDiv.html('<input type="text" name="Middlename" id="Middlename" width="100" data-val="true" data-val-required="The Middleneim field is required." />');

newTextBoxDiv.appendTo('#x');
</script>

，客户端验证启动。有没有办法明确地将延迟创建的输入包含在验证中？

Answer 1

UPDATE ：这个答案是如果您使用jquery不显眼的验证，那么您没有写下您使用的内容。

首先，将此插件添加到jQuery ready中： http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

请注意，您必须在表单标记内添加元素。假设你的标签周围有一些包装，我称之为“元素”。

将元素追加到DOM后，请调用：

$.validator.unobtrusive.parseDynamicContent($(element).find("form").selector);
var form = $(element).find("form");
$(form).valid();
    $(form).find("input").each(function () {
        $(this).blur(function () {
            $(this).valid();
        });
    });
    $(form).find("select").each(function () {
        $(this).change(function () {
            $(this).valid();
        });

Answer 2

通过将值推送到“window.mvcClientValidationMetadata”验证器数组中，向MVC客户端验证添加到技术上是可行的。有一篇非常好的文章here，其中展示了一些涉及的脚本和技术。这对服务器端验证没有帮助，但由于客户端在没有javascript的情况下无法获得此输入，因此您已经减轻了这一点。

我通常会对此应用更标准的渐进增强模式。默认情况下创建中间名输入，并实现标准MVC验证器。然后使用jQuery隐藏它，除非（或直到）需要。当然这可能不符合您的要求，但如果确实如此，那么我认为这是一种更好的方法。

验证动态添加的控件

2 个答案: