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

Question

这是我的问题......

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

到目前为止一切都那么好......到目前为止一切都运行良好.我不引人注目的客户端验证对从局部视图创建的元素非常有用.当我现在尝试创建一些动态输入元素(通过jQuery)并将它们插入/附加到由局部视图创建的表单时,我的问题就出现了.我无法在动态创建的元素上进行任何不显眼的客户端验证.

我尝试过: - 克隆现有元素,修改它们的ID /名称并将它们附加到DOM中. - 创建html字符串并将其插入DOM中.

每次插入动态元素后,我都尝试调用: - $ .validator.unobtrusive.parseElement()[new element] - $ .validator.unobtrusive.parse()[new container,document,etc] - $ .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);
});

任何帮助将不胜感激!

编辑: 经过一些额外的研究和测试后,我回到这个解决方案,以确定它为什么不适合我.事实证明,我正在插入作为列表一部分的新输入元素.因此,我的新元素的名称看起来与此类似:[0] .id,[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')"是表单的选择器.

这应该够了吧.