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

Question

这是我的问题...

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

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

我尝试过： - 克隆现有元素，修改它们的 id/名称并将它们附加到 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);
});

任何帮助将不胜感激！

编辑： 在做了一些额外的研究和测试后，我回到了这个 解决方案来确定为什么它对我不起作用。事实证明，我正在插入属于列表一部分的新输入元素。因此，我的新元素的名称看起来类似于：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')”是表单的选择器。

那应该可以解决问题。