20

ASP.NETMVCでjQueryの控えめな検証プラグインを使用しています。サーバーにレンダリングされるフィールドはすべて適切に検証されます。

ただし、JavaScriptを使用してフォームにフィールドを動的に追加すると、適切なHTML5data-*属性があっても検証されません。

誰かが私がこの目標を達成する方法について正しい方向に私を導くことができますか？

4

3 に答える 3

21

より簡単な答え：

MVC4とJQuery1.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.
}

たとえば、idtblContactsで新しいテーブルを追加した場合、次のように呼び出すことができます。

fnValidateDynamicContent($("#tblContacts"))
于 2013-02-28T06:54:24.623 に答える
12

これがあなたが役に立つと思うかもしれないブログ投稿です、そしてそれはあなたを正しい軌道に乗せるはずです。そこから取られた拡張方法：

/// <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エラーが発生します。

于 2011-05-11T14:06:46.387 に答える
10

ダリンの答えが機能するように、私は次の行を変更しました。

$.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.parseisSkip内部的にparseElementメソッドを呼び出しますが、パラメーターをtrueに送信するたびに、この値を使用します

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

jquery.unobtrusive.jsのこのコードは、要素に検証を添付せず、ページに最初に存在した入力の検証データのみを検出します。

上記のDarinの答えは正しいことに注意してください。彼が言及したブログでは、多くの人がxhalentのコード（darinによる投稿）を使用して問題を解決したと述べています。なぜそれが機能しなかったのかは私の理解を超えています。さらに、あなたはただ電話することをあなたに伝えるたくさんの投稿を見つけることができます

$.validator.unobtrusive.parse(selector)

動的にロードされたコンテンツを検証するには十分です

于 2011-05-12T12:30:17.053 に答える