проверка на стороне клиента с динамически добавленным полем

Question

Я использую ненавязчивый плагин проверки jQuery в ASP.NET MVC.Все поля, отображаемые на сервере, проверяются надлежащим образом.

Однако, если я динамически добавляю поле в форму с использованием 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

Вот сообщение в блоге , которое может оказаться полезным, и это должно поставить вас на правильный путь.Метод расширения, взятый оттуда:

/// <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

Чтобы ответ Дарина сработал, я изменил следующую строку:

$.validator.unobtrusive.parse(selector); 

К этому:

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

Вот полный пример:

(function ($) {
  $.validator.unobtrusive.parseDynamicContent = function (selector) {
    <b><i>// don't use the normal unobstrusive.parse method
    <del>// $.validator.unobtrusive.parse(selector);</del> 

     // use this instead:
     $(selector).find('*[data-val = true]').each(function(){
        $.validator.unobtrusive.parseElement(this,false);
     });
    </i></b>
    //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 не прикрепляет проверку к элементу, и мы находим только данные проверки входов, которые изначально присутствовали на странице.

Примечание Ответ Дарина выше верен, и вы можете найти в блоге, на который он ссылался, что многие люди решили проблему с помощью кода xhalent (опубликовано darin). почему это не сработало, это за пределами моего понимания. Кроме того, вы можете найти множество сообщений , в которых говорится, что просто звоните

$.validator.unobtrusive.parse(selector) 

достаточно для проверки динамически загружаемого контента