动态添加字段的客户端validation

我在ASP.NET MVC中使用jQuery的不显眼的validation插件。 正确validation在服务器上呈现的任何字段。

但是，如果我使用JavaScript在表单中动态添加字段，即使它具有相应的HTML5 data-*属性，也不会validation它。

任何人都可以指导我如何实现这一目标吗？

Answer 1

更简单的答案：

我正在使用MVC 4和JQuery 1.8。 我已经使它成为一个模块化函数 ，它接受新添加元素的jQuery对象：

 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. } 

例如，如果您添加了一个id为tblContacts的新表，那么您可以像这样调用：

 fnValidateDynamicContent($("#tblContacts")) 

Answer 2

这是一篇你可能觉得有用的博客文章 ，应该会让你走上正轨。 从那里采取的扩展方法：

 ///  ///  ///  (function ($) { $.validator.unobtrusive.parseDynamicContent = function (selector) { //use the normal unobstrusive.parse method $.validator.unobtrusive.parse(selector); //get the relevant form var form = $(selector).first().closest('form'); //get the collections of unobstrusive validators, and jquery validators //and compare the two var unobtrusiveValidation = form.data('unobtrusiveValidation'); var validator = form.validate(); $.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); } }); } }); } })($); 

然后：

 var html = "; $("form").append(html); $.validator.unobtrusive.parseDynamicContent('form input:last'); 

更新以添加博客post评论中引用的修复，否则会发生js错误。

Answer 3

为了让Darin的答案奏效，我更改了以下内容：

 $.validator.unobtrusive.parse(selector); 

对此：

  $(selector).find('*[data-val = true]').each(function(){ $.validator.unobtrusive.parseElement(this,false); }); 

这是完整的样本：

 (function ($) { $.validator.unobtrusive.parseDynamicContent = function (selector) { // don't use the normal unobstrusive.parse method   // $ .validator.unobtrusive.parse（selector）;  

      //使用此代替：
      $（selector）.find（'* [data-val = true]'）。each（function（）{
         $ .validator.unobtrusive.parseElement（这一点，假）;
      }）;
    
     //获取相关表格
     var form = $（selector）.first（）。nearest（'form'）;

     //获取不引人注意的validation器和jqueryvalidation器的集合
     //并比较两者
     var unobtrusiveValidation = form.data（'unobtrusiveValidation'）;
     var validator = form.validate（）;

     $ .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] =数据;
             args.messages = unobtrusiveValidation.options.messages [elname] [rulename];
             $（'[name =“'+ elname +'”]'）。rules（“add”，args）;
           }
         }）;
       }
     }）;
   }
 }）（$）;

$.validator.unobtrusive.parse .validator.unobtrusive.parse在内部调用parseElement方法，但每次将isSkip参数发送到true时，使用此值

 if (!skipAttach) { valInfo.attachValidation(); } 

jquery.unobtrusive.js中的此代码不会将validation附加到元素，我们只查找最初出现在页面上的输入的validation数据。

注意 Darin上面的答案是正确的，你可以在他提到的博客上找到许多人使用xhalent的代码解决了问题（由darin发布）。 为什么它不起作用超出了我的理解。 此外，你可以找到很多post告诉你只是打电话

 $.validator.unobtrusive.parse(selector) 

足以使动态加载的内容得到validation