Question

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

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

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

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

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

fnValidateDynamicContent($("#tblContacts"))

Answer 2

这是一个blog post你可能会觉得有用，这应该会让你走上正确的轨道。从那里采取的扩展方法：

/// <reference path="jquery-1.4.4.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />

(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 = "<input data-val='true' "+
           "data-val-required='This field is required' " +
           "name='inputFieldName' id='inputFieldId' type='text'/>;
$("form").append(html);

$.validator.unobtrusive.parseDynamicContent('form input:last');

更新以添加博客帖子评论中引用的修复，否则会发生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); 

     // use this instead:
     $(selector).find('*[data-val = true]').each(function(){
        $.validator.unobtrusive.parseElement(this,false);
     });
    
    //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);
          }
        });
      }
    });
  }
})($);

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

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

jquery.unobtrusive.js中的这段代码没有将验证附加到元素，我们只找到最初出现在页面上的输入的验证数据。

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

$.validator.unobtrusive.parse(selector)

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

动态添加字段的客户端验证

3 个答案: