jquery.validate.unobtrusive不使用动态注入元素

Question

我正在使用ASP.Net MVC3,更简单的方法来使用客户端验证将启用jquery.validate.unobtrusive.对于那些来自服务器的东西,一切正常.

但是当我尝试用javascript注入一些新的"输入"时,我知道我需要调用$.validator.unobtrusive.parse()来重新绑定验证.但是,所有这些动态注入的字段都不起作用.

更糟糕的是,我尝试手动绑定使用jquery.validate它也无法正常工作.有什么想法吗？

Answer 1

我尝试了Xhalent的方法,但不幸的是它不适合我.罗宾的方法确实有效,但没有奏效.它适用于动态添加的元素,但如果您尝试使用JQuery从DOM中删除所有验证属性和跨度,验证库仍会尝试验证它们.

但是,如果除了"validationData"之外还删除了表单的"unobtrusiveValidation"数据,它就像一个动态添加和删除要验证或未验证的元素的工具.

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

Answer 2

我为jquery.validate.unobtrusive库创建了一个扩展,为我的情况解决了这个问题 - 它可能是有意义的.

http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

Answer 3

我实际上非常喜欢@viggity和@Robins解决方案的简单性,所以我把它变成了一个快速的小插件:

(function ($) {

    $.fn.updateValidation = function () {
        var $this = $(this);
        var form = $this.closest("form")
            .removeData("validator")
            .removeData("unobtrusiveValidation");

        $.validator.unobtrusive.parse(form);

        return $this;
    };
})(jQuery);

用法示例:

$("#DischargeOutcomeNumberOfVisits")
    .attr("data-val-range-min", this.checked ? "1" : "2")
    .updateValidation();

Answer 4

我遇到了同样的问题.我发现不可能在同一个表单上调用$ .validator.unobtrusive.parse()两次.最初从服务器加载表单时,表单由不显眼的库自动解析.当您将一个输入元素动态添加到窗体并再次调用$ .validator.unobtrusive.parse()时,它将无法正常工作.parseElement()也是如此.

不显眼的lib调用jquery validate插件的validate方法来设置所有规则和消息.问题是,当再次调用时,插件不会更新其给定的新规则集.

我找到了一个粗略的解决方案:在不显眼的lib上调用parse方法之前,我扔掉了表单验证器:

$('yourForm').removeData("validator");

现在,当不显眼的lib调用validate方法时,将重新创建所有规则和消息,包括动态添加的输入.

希望这可以帮助

Answer 5

我使用MVC 4和JQuery 1.8,看起来像需要以下的代码块,以使jQuery来验证通过Ajax,或Jquery的动态内容注入到DOM.

我创建了一个模块化函数,它接受新添加元素的Jquery对象.如果您tblContacts在单击按钮时使用Jquery 克隆了具有id的新表,则在js文件中包含以下函数

function fnValidateDynamicContent(element) {
    var currForm = element.closest("form");
    currForm.removeData("validator");
    currForm.removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse(currForm);
    currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors.
}

并称之为:

fnValidateDynamicContent("#tblContacts")

Answer 6

我尝试了 vivigity 的答案，起初一切似乎都有效。但过了一段时间，我注意到我添加的动态项目越多，验证速度就越慢。原因是他的解决方案不会解除事件处理程序的绑定，而是每次都添加新的事件处理程序。因此，如果添加 5 个项目，验证将执行 6 次，而不是仅执行一次。要解决此问题，您必须将事件与removeData 调用一起解除绑定。

$("form").removeData("validator")
         .removeData("unobtrusiveValidation")
         .off("submit.validate click.validate focusin.validate focusout.validate keyup.validate invalid-form.validate");
$.validator.unobtrusive.parse("form");