jquery.validate.unobtrusive不能使用dynamic注入的元素

我正在与ASP.Net MVC3 ,更简单的方法来使用客户端validation将启用jquery.validate.unobtrusive 。 一切工作正常,从服务器的东西。

但是当我尝试用javascript注入一些新的“input”时,我知道我需要调用$.validator.unobtrusive.parse()来重新validationvalidation。 但是,所有这些dynamic注入的域都不起作用。

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

12 Solutions collect form web for “jquery.validate.unobtrusive不能使用dynamic注入的元素”

我已经为jquery.validate.unobtrusive库创build了一个扩展来解决这个问题,这可能是我感兴趣的。

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

我尝试了Xhalent的方法,但不幸的是它不适合我。 罗宾的方法确实奏效,并没有奏效。 它对于dynamic添加的元素非常适用,但是如果您尝试使用JQuery从DOM删除所有validation属性和跨度,则validation库仍然会尝试validation它们。

但是,除了“validationData”,如果删除了表单的“unobtrusiveValidation”数据,它就像一个魅力一样dynamic添加和删除要validation或未validation的元素。

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

我其实很喜欢@viggity和@Robins解决scheme的简单性,所以我把它变成了一个快速的小插件:

 (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(); 

我有同样的问题。 我发现无法在同一个表单上调用$ .validator.unobtrusive.parse()两次。 最初从服务器加载表单时,表单由不显眼的库自动分析。 当您将input元素dynamic添加到表单并再次调用$ .validator.unobtrusive.parse()时,它将不起作用。 parseElement()也是一样。

unobtrusive库调用jquery validate插件的validate方法来设置所有的规则和消息。 问题是,再次调用时,插件不会更新它给定的新规则集。

我发现一个粗略的解决scheme:在unobstrusive库调用parsing方法之前,我扔掉表单validation程序:

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

现在,当不显眼的lib调用validate方法时,所有规则和消息都被重新创build,包括dynamic添加的input。

希望这可以帮助

我正在使用MVC 4和JQuery 1.8,看起来像下面这段代码是需要启用Jquerydynamic注入内容通过Ajax或Jquery到DOMvalidation。

我做了一个模块化的function,接受新添加的元素的Jquery对象。 如果你点击一个button,使用tblContacts克隆了一个新的id为tblContacts表,然后在你的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") 

从Xhalent的解决scheme标记为上面的答案,我扩大了一点。

 $.validator.unobtrusive.parseDynamicContent = function (selector) { var $selector = $(selector), $jqValUnob = $.validator.unobtrusive, selectorsDataValAttr = $selector.attr('data-val'), $validationInputs = $selector.find(':input[data-val=true]'); if ((selectorsDataValAttr !== 'true') && ($validationInputs.length === 0)) { return; } if (selectorsDataValAttr === 'true') { $jqValUnob.parseElement(selector, true); } $validationInputs.each(function () { $jqValUnob.parseElement(this, true); }); //get the relevant form var $form = $selector.first().closest('form'); $jqValUnob.syncValdators($form); }; /* synchronizes the unobtrusive validation with jquery validator */ $.validator.unobtrusive.syncValdators = function ($form) { if ($.hasData($form[0])) { var unobtrusiveValidation = $form.data('unobtrusiveValidation'), validator = $form.validate(); // add validation rules from unobtrusive to jquery $.each(unobtrusiveValidation.options.rules, function (elname, elrules) { if (validator.settings.rules[elname] == undefined) { var args = {}; $.extend(args, elrules); args.messages = unobtrusiveValidation.options.messages[elname]; $("[name='" + elname + "']").rules("add", args); } else { $.each(elrules, function (rulename, data) { if (validator.settings.rules[elname][rulename] == undefined) { var args = {}; args[rulename] = data; args.messages = unobtrusiveValidation.options.messages[elname][rulename]; $("[name='" + elname + "']").rules("add", args); } }); } }); // remove all validation rules from jquery that arn't in unobtrusive $.each(validator.settings.rules, function (elname, elrules) { if (unobtrusiveValidation.options.rules[elname] === undefined) { delete validator.settings.rules[elname]; } else { $.each(elrules, function (rulename, data) { if (rulename !== "messages" && unobtrusiveValidation.options.rules[elname][rulename] === undefined) { delete validator.settings.rules[elname][rulename]; } }); } }); } }; $.validator.unobtrusive.unparseContent = function (selector) { var $selector = $(selector); // if its a text node, then exit if ($selector && $selector.length > 0 && $selector[0].nodeType === 3) { return; } var $form = $selector.first().closest('form'), unobtrusiveValidation = $form.data('unobtrusiveValidation'); $selector.find(":input[data-val=true]").each(function () { removeValidation($(this), unobtrusiveValidation); }); if ($selector.attr('data-val') === 'true') { removeValidation($selector, unobtrusiveValidation); } $.validator.unobtrusive.syncValdators($form); }; function removeValidation($element, unobtrusiveValidation) { var elname = $element.attr('name'); if (elname !== undefined) { $element.rules('remove'); if (unobtrusiveValidation) { if (unobtrusiveValidation.options.rules[elname]) { delete unobtrusiveValidation.options.rules[elname]; } if (unobtrusiveValidation.options.messages[elname]) { delete unobtrusiveValidation.options.messages[elname]; } } } } 

所以基本上它和Xhalent的解决scheme仍然是一样的,但是我添加了删除dom元素的规则。 所以,当你从Dom中删除元素,并且你想要删除这些validation规则时,请调用:

 $.validator.unobtrusive.unparseContent('input.something'); 

为什么不直接从jQueryvalidation文档使用规则function 。 喜欢这个:

 $('#newField0').rules('add', { required: true, minlength: 2 }); //use Html.ValidationMessage will renders a span element, unobtrusive need it to display errors $('@Html.ValidationMessage("newField0")').insertAfter('#newField0'); 

我在代码中发现了@ Xhalent的代码脚本,并将删除它,因为我没有使用它,这导致我这个问题。

这段代码很干净简单:

 jQuery.fn.unobtrusiveValidationForceBind = function () { //If you try to parse a form that is already parsed it won't update var $form = this .removeData("validator") /* added by the raw jquery.validate plugin */ .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin */ $form.bindUnobtrusiveValidation(); } 

然后,要调用这个jQuery扩展,只需使用select器来抓取你的表单:

 $('#formStart').unobtrusiveValidationForceBind(); 

中提琴!

我一直在摆弄这一段时间,解决scheme,并稍后再试(当我有一些业余时间,信不信由你)。

我不确定这个行为是否会在新版本的jquery(我们使用1.7.2)中发生变化,因为这个线程是最后创build或注释的,但是我发现.parseElement(inputElement)工作正常,当我尝试dynamic添加创build的元素已经有一个validation器加载的窗体。 @jamesfm(11年2月15日)已经在上面的一个评论中提到过这个问题,但是我在开始的几次工作中忽略了这个问题。 所以我把它作为一个单独的答案join,使其更加明显,因为我认为这是一个很好的解决scheme,不需要太多的开销。 这可能与后续答案中提出的所有问题无关,但我认为这将是对原始问题的解决scheme。 以下是我的工作方式:

 //row & textarea created dynamically by an async ajax call further up in the code var row = ...; //row reference from somewhere var textarea = row.find("textarea"); textarea.val("[someValue]"); //add max length rule to the text area textarea.rules('add', { maxlength: 2000 }); //parse the element to enable the validation on the dynamically added element $.validator.unobtrusive.parseElement(textarea); 

首先,我认为这个调用应该是.validator,而不是validation,那么你需要传入表单的id

 $.validator.unobtrusive.parse("#id"); 

我尝试了他的回答,起初一切似乎都奏效了。 但过了一会儿,我发现validation变得痛苦缓慢,我添加更dynamic的项目。 原因是他的解决scheme并没有解除绑定事件处理程序,而是每次都添加新的处理程序。 所以如果添加5个项目,validation会执行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"); 

在dynamic内容的情况下,您需要更新不显眼的validation如下,并检查Form是否有效,而提交。

 function UpdateUnobtrusiveValidations(idForm) { $(idForm).removeData("validator").removeData("unobtrusiveValidation"); $.validator.unobtrusive.parse($(idForm)); }; $('#idDivPage').on('click', '#idSave', function (e) { e.preventDefault(); if (!$('#idForm').valid()) { // Form is invalid … so return return false; } else { // post data to server using ajax call // update Unobtrusive Validations again UpdateUnobtrusiveValidations('#idForm'); } });