web-dev-qa-db-ja.com

動的に追加されたフィールドを使用したクライアント側の検証

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

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

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

jqueryasp.net-mvcasp.net-mvc-3unobtrusive-validation
20
Muhammad Adeel Zahid

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

$.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による投稿）を使用して問題を解決したと彼が言及したブログを見つけることができます。それが機能しなかった理由は私の理解を超えています。さらに、あなたはたくさんの 投稿 を見つけることができます

$.validator.unobtrusive.parse(selector)

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

10
Muhammad Adeel Zahid

より簡単な答え：

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

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

fnValidateDynamicContent($("#tblContacts"))
19
Sundara Prabu

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

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

12
Darin Dimitrov