在使用 MVC 3 和 jQuery 进行 AJAX 和动态创建之后，元素未通过不显眼的验证进行验证

Question

这是我的问题...

我有一个页面，它最初呈现并显示使用 Ajax.BeginForm 创建的 AJAX 表单。输入一些标准并发布 AJAX 表单。返回包含使用 Html.BeginForm 创建的 HTML 表单的部分视图。

到目前为止一切顺利...到目前为止一切正常。我的不显眼的客户端验证在从局部视图创建的元素上效果很好。当我现在尝试创建一些动态输入元素（通过 jQuery）并将它们插入/附加到由局部视图创建的表单中时，就会出现我的问题。我无法在动态创建的元素上进行任何不显眼的客户端验证。

我尝试过： - 克隆现有元素，修改它们的 ids/name 并将它们附加到 DOM 中。 - 创建 html 字符串并将它们插入 DOM。

在每次插入动态元素后，我都尝试调用： - $.validator.unobtrusive.parseElement() [新元素] - $.validator.unobtrusive.parse() [新容器、文档等] - $.validator.unobtrusive.parseDynamicContent() [插件]

这里是 jQuery 代码详细信息...

$("#insert").live("click", function () {
    var html = "<input type='text' value='' name='CustomerNominationVolume' id='CustomerNominationVolume' data-val-required='The Nomination (Dth) field is required.' data-val-number='The field Nomination (Dth) must be a number.' data-val='true' /><br />"
    html += "<span class='field-validation-valid' data-valmsg-replace='true' data-valmsg-for='CustomerNominationVolume'></span>";
    $("#new").html(html);
});

$("#parse").live("click", function () {
    $.validator.unobtrusive.parse(document);
});

$("#validate").live("click", function () {
    var element = $("#CustomerNominationVolume");
    var form = $(element).first().closest('form');
    form.validate().element(element);
});

任何帮助将不胜感激！

编辑： 在做了一些额外的研究和测试之后，我回到了这个solution 以确定它为什么不适合我。事实证明，我正在插入属于列表一部分的新输入元素。因此，我的新元素的名称将类似于：something[0].id、something[1].id 等...

这些名称导致 $.validator.unobtrusive.parseDynamicContent() 函数在此行失败： $('[name=' + elname + ']').rules("add", args);

我只是将其更改为 $("[name='" + elname + "']").rules("add", args);

现在一切正常...

Answer 1

添加动态内容后，调用：

    $("form").removeData("validator");
    $("form").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("form");

其中 "$('form')" 是表单的选择器。

这应该可以解决问题。