jquery.validate.unobtrusive が動的に挿入された要素で機能しない

StackOverflow https://stackoverflow.com/questions/4406291

質問

私は一緒に働いています ASP.Net MVC3, 、クライアント検証を使用するより簡単な方法は、 jquery.validate.unobtrusive. 。サーバーから直接のものについては、すべてが正常に機能します。

しかし、JavaScript でいくつかの新しい「入力」を挿入しようとすると、次の呼び出しが必要であることがわかりました。 $.validator.unobtrusive.parse() 検証を再バインドします。しかし、それでも、動的に挿入されたフィールドはすべて機能しません。

さらに悪いことに、次を使用して手動でバインドしようとします jquery.validate それも機能していません。何かご意見は？

役に立ちましたか？

解決

私の状況に合わせてこの問題を解決する jquery.validate.unobtrusive ライブラリの拡張機能を作成しました。興味深いかもしれません。

http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

他のヒント

私はXhalentのアプローチを試みたが、残念ながらそれは私のために働いていませんでした。ロビンのアプローチは、仕事を行なったし、動作しませんでした。これは、動的に追加された要素のために素晴らしい仕事をしていますが、DOMからすべての検証属性とスパンを削除するにはjQueryのを使用しようとした場合、検証ライブラリはまだそれらを検証しようとします。

あなたは「validationData」に加えて、フォームの「unobtrusiveValidation」のデータを削除する場合は、しかし、それは動的に追加すると、あなたが検証か検証したいという要素を除去するための魅力のように働いています。

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

私は実際本当に@viggityと@Robinsソリューションのシンプルさのような、私は小さなクイックプラグインにそれを回してます：

(function ($) {

    $.fn.updateValidation = function () {
        var $this = $(this);
        var form = $this.closest("form")
            .removeData("validator")
            .removeData("unobtrusiveValidation");

        $.validator.unobtrusive.parse(form);

        return $this;
    };
})(jQuery);

使用例：

$("#DischargeOutcomeNumberOfVisits")
    .attr("data-val-range-min", this.checked ? "1" : "2")
    .updateValidation();

私は同じ問題を抱えています。私はそれが二度同じフォーム上の$ .validator.unobtrusive.parse（）を呼び出すことはできません発見しました。 サーバーから最初にフォームをロードするとき、フォームは控えめなライブラリによって自動的に解析されます。フォームに動的に入力要素を追加し、再び$ .validator.unobtrusive.parse（）を呼び出すと、それは動作しません。同じ。）（parseElementのために行く。

控えめなlibには、すべてのルールとメッセージを設定するには、プラグインのjQueryの検証のvalidateメソッドを呼び出します。問題が再び、プラグインはその与えられたルールの新しいセットを更新しません。

と呼ばれる場合には、

私は1つの粗解決策を見つけた：unobstrusive LIBのparseメソッドを呼び出す前に、私は、フォームのバリデータを捨てます：

$('yourForm').removeData("validator");

validateメソッドは、控えめなLIBによって呼び出されたときに今、すべてのルールとメッセージを動的に追加入力を含む再作成されます。

ホープ、このことができます。

使っています MVC 4 および JQuery 1.8、 Jquery が Ajax 経由で動的に挿入されたコンテンツ、または Jquery を DOM に検証できるようにするには、次のコードが必要なようです。

新しく追加された要素の Jquery オブジェクトを受け入れるモジュラー関数を作成しました。ID を使用して新しいテーブルを複製した場合 tblContacts ボタンをクリックして Jquery を使用し、js ファイルに以下の関数を含めます。 

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

次のように呼び出します。

fnValidateDynamicContent("#tblContacts")

上記の答えとしてマークXhalentの溶液から取って、私はそれに少しを展開します。

$.validator.unobtrusive.parseDynamicContent = function (selector) {
    var $selector = $(selector),
        $jqValUnob = $.validator.unobtrusive,
        selectorsDataValAttr = $selector.attr('data-val'),
        $validationInputs = $selector.find(':input[data-val=true]');

    if ((selectorsDataValAttr !== 'true') && 
        ($validationInputs.length === 0)) { 
        return; 
    }

    if (selectorsDataValAttr === 'true') {
        $jqValUnob.parseElement(selector, true);
    }

    $validationInputs.each(function () {
        $jqValUnob.parseElement(this, true);
    });

    //get the relevant form
    var $form = $selector.first().closest('form');

    $jqValUnob.syncValdators($form);
};

/* synchronizes the unobtrusive validation with jquery validator */
$.validator.unobtrusive.syncValdators = function ($form) {
    if ($.hasData($form[0])) {
        var unobtrusiveValidation = $form.data('unobtrusiveValidation'),
            validator = $form.validate();

        // add validation rules from unobtrusive to jquery
        $.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);
                    }
                });
            }
        });
        // remove all validation rules from jquery that arn't in unobtrusive
        $.each(validator.settings.rules, function (elname, elrules) {
            if (unobtrusiveValidation.options.rules[elname] === undefined) {
                delete validator.settings.rules[elname];
            } else {
                $.each(elrules, function (rulename, data) {
                    if (rulename !== "messages" && unobtrusiveValidation.options.rules[elname][rulename] === undefined) {
                        delete validator.settings.rules[elname][rulename];
                    }
                });
            }
        });
    }        
};

$.validator.unobtrusive.unparseContent = function (selector) {
    var $selector = $(selector);

    // if its  a text node, then exit
    if ($selector && $selector.length > 0 && $selector[0].nodeType === 3) {
        return;
    }

    var $form = $selector.first().closest('form'), 
        unobtrusiveValidation = $form.data('unobtrusiveValidation');

    $selector.find(":input[data-val=true]").each(function () {
        removeValidation($(this), unobtrusiveValidation);
    });
    if ($selector.attr('data-val') === 'true') {
        removeValidation($selector, unobtrusiveValidation);
    }
    $.validator.unobtrusive.syncValdators($form);
};

function removeValidation($element, unobtrusiveValidation) {
    var elname = $element.attr('name');
    if (elname !== undefined) {
        $element.rules('remove');
        if (unobtrusiveValidation) {
            if (unobtrusiveValidation.options.rules[elname]) {
                delete unobtrusiveValidation.options.rules[elname];
            }
            if (unobtrusiveValidation.options.messages[elname]) {
                delete unobtrusiveValidation.options.messages[elname];
            }
        }
    }
}
だから、基本的にそれはまだ上記Xhalentのソリューションと同じように動作しますが、私はあなたがDOMから削除要素のルールを削除する機能を追加しました。だから、あなたはドムから要素を削除し、それらの検証ルールは、その後も削除したいときに呼び出すます：

$.validator.unobtrusive.unparseContent('input.something');

は使用しないのはなぜルールはjqueryの検証ドキュメントから直接の機能します。このように：

$('#newField0').rules('add', {
    required: true,
    minlength: 2
});
//use Html.ValidationMessage will renders a span element, unobtrusive need it to display errors
$('@Html.ValidationMessage("newField0")').insertAfter('#newField0');

私はこのSOの質問に私をリードしている、私のコードでXhalentのコード・スクリプト@発見し、私はそれを使用していなかったので、それを削除するつもりでした。

このコードは非常にクリーンでシンプルです：

jQuery.fn.unobtrusiveValidationForceBind = function () {
    //If you try to parse a form that is already parsed it won't update
    var $form = this
       .removeData("validator") /* added by the raw jquery.validate plugin */
            .removeData("unobtrusiveValidation");  /* added by the jquery     unobtrusive plugin */

    $form.bindUnobtrusiveValidation();
}

すると、ちょうどあなたが形成つかむために、セレクタを使用し、このjQueryの拡張機能を呼び出すために：

$('#formStart').unobtrusiveValidationForceBind();

ビオラ！

私はviggityの答えを試してみましたが、最初にすべての仕事に思えました。しかし、後に、私は検証が痛いほどになり、私が追加もっと動的に項目を遅らせることに気づいている間。その理由は、彼の解決策は、イベントハンドラをバインド解除が、新しいものを毎回追加しないということでした。あなたが5つの項目を追加するのであれば、検証は一度だけ6回の代わりに実行されます。この問題を解決するには、REMOVEDATA通話に加えて、イベントのバインドを解除する必要があります。

$("form").removeData("validator")
         .removeData("unobtrusiveValidation")
         .off("submit.validate click.validate focusin.validate focusout.validate keyup.validate invalid-form.validate");
$.validator.unobtrusive.parse("form");

動的なコンテンツの場合、あなたは以下のように控えめな検証を更新しFormが送信中に有効であるかどうかを確認する必要があります。

function UpdateUnobtrusiveValidations(idForm) {
    $(idForm).removeData("validator").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($(idForm));
};


$('#idDivPage').on('click', '#idSave', function (e) {
    e.preventDefault();
    if (!$('#idForm').valid()) {
        // Form is invalid … so return
        return false;
    }
    else {
        // post data to server using ajax call
        // update Unobtrusive Validations again
        UpdateUnobtrusiveValidations('#idForm');
    }
});

私は解決策を廃棄して（私はいくつかの暇な時間を持っていたとき、それを信じるかどうか）以降の再試行、しばらくこれで周りいじるされています。

このスレッドが作成または最後にコメントしましたので、この動作は、（私たちがしている1.7.2を使用して）jQueryの新しいバージョンに変更されているだろうが、私は私が動的に作成追加しようとするとその.parseElement(inputElement)は罰金を作品見つかった場合は、

私はわかりませんすでにロードされたバリデータを持っているフォームに要素。 これは、すでに上記のコメントの一つに@jamesfm（2月15日'11）によって提案されたが、私はそれを私がこれに取り組んでいた最初の数回を見落としました。それがより明確にする別の答えとして、それを追加し、私はそれが良い解決策だと思うので、多くのオーバーヘッドを必要としないためだ、私はそう。それは、その後の答えで提起されたすべての問題に関連しないかもしれないが、私はそれが元の質問への解決策になると思います。ここで私は私が働いてしまった方法は次のとおりです。

//row & textarea created dynamically by an async ajax call further up in the code
var row = ...; //row reference from somewhere
var textarea = row.find("textarea");
textarea.val("[someValue]");

//add max length rule to the text area
textarea.rules('add', {
    maxlength: 2000
});
//parse the element to enable the validation on the dynamically added element
$.validator.unobtrusive.parseElement(textarea);

まず、私は、呼び出しは.validatorにすべきだと思いません検証、あなたは、フォームのIDを渡す必要があります。

$.validator.unobtrusive.parse("#id");
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top