使用动态添加字段的客户端验证 [英] client side validation with dynamically added field

问题描述

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

I am using jQuery's unobtrusive validation plugin in with ASP.NET MVC. Any fields that are rendered on the server are properly validated.

但是，如果我使用 JavaScript 在表单中动态添加一个字段，即使它具有适当的 HTML5 data-* 属性，它也不会被验证.

However, if I dynamically add a field in the form using JavaScript, it is not validated even though it has the appropriate HTML5 data-* attributes.

有人能指导我如何实现这一目标的正确方向吗?

Can anyone guide me in right direction on how I can achieve this goal?

推荐答案

为了让 Darin 的回答有效，我更改了以下行:

In order for Darin's answer to work, I changed the following line:

$.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 所以这个值

$.validator.unobtrusive.parse internally calls parseElement method but each time it sends isSkip parameter to true so with this value

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

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

this code in jquery.unobtrusive.js does not attach validation to the element and we find only validation data of inputs that were initially present on the page.

注意 以上 Darin 的回答是正确的，您可以在他提到的博客上找到许多人使用 xhalent 的代码(由 darin 发布)解决了问题.为什么它不起作用超出了我的理解.此外，您可以找到大量帖子你只是打电话

Note Darin's answer above is correct and you can find on the blog he referred that many people have solved problem using xhalent's code (posted by darin). why it did not work is beyond my understanding. Moreover, you can find plenty of posts that tell you that just calling

$.validator.unobtrusive.parse(selector) 

足以验证动态加载的内容

is enough for dynamically loaded content to be validated

这篇关于使用动态添加字段的客户端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！