私はで作業しています。ASP.Net MVC3クライアント検証を使用する簡単な方法は、を有効にすることjquery.validate.unobtrusiveです。サーバーから直接のものについては、すべてが正常に機能します。
しかし、javascriptを使用していくつかの新しい「入力」を挿入しようとすると$.validator.unobtrusive.parse()、検証を再バインドするために呼び出す必要があることがわかりました。しかし、それでも、これらの動的に注入されたフィールドはすべて機能していません。
さらに悪いことに、を使用して手動でバインドしようとしましjquery.validateたが、どちらも機能していません。何かご意見は？
Xhalentのアプローチを試しましたが、残念ながらうまくいきませんでした。ロビンのアプローチはうまくいきましたが、うまくいきませんでした。動的に追加された要素にはうまく機能しましたが、JQueryを使用してすべての検証属性とスパンをDOMから削除しようとした場合でも、検証ライブラリはそれらを検証しようとします。
ただし、「validationData」に加えてフォームの「unobtrusiveValidation」データを削除すると、検証する要素または検証しない要素を動的に追加および削除するための魅力のように機能しました。
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
私の状況でこの問題を解決するjquery.validate.unobtrusiveライブラリの拡張機能を作成しました。これは興味深いかもしれません。
http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
私は実際に@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（）を2回呼び出すことはできないことを発見しました。サーバーから最初にフォームをロードするとき、フォームは目立たないライブラリによって自動的に解析されます。入力要素をフォームに動的に追加し、$。validator.unobtrusive.parse（）を再度呼び出すと、機能しません。同じことがparseElement（）にも当てはまります。
目立たないlibは、jquery validateプラグインのvalidateメソッドを呼び出して、すべてのルールとメッセージを設定します。問題は、再度呼び出されたときに、プラグインが指定された新しいルールのセットを更新しないことです。
私は1つの大まかな解決策を見つけました：目立たないlibでparseメソッドを呼び出す前に、フォームバリデーターを捨てます：
$('yourForm').removeData("validator");
これで、validateメソッドが目立たないlibによって呼び出されると、動的に追加された入力を含むすべてのルールとメッセージが再作成されます。
お役に立てれば
私はMVC4とJQuery1.8を使用していますが、JqueryがAjaxまたはJqueryを介してDOMに動的に挿入されたコンテンツを検証できるようにするには、次のコードが必要なようです。
新しく追加された要素のJqueryオブジェクトを受け入れるモジュラー関数を作成しました。tblContactsボタンのクリックでJqueryを使用してIDを持つ新しいテーブルのクローンを作成した場合は、以下の関数を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")
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');
私はviggityの答えを試しましたが、最初はすべてがうまくいったようでした。しかし、しばらくすると、追加したアイテムが動的になるほど、検証が非常に遅くなることに気付きました。その理由は、彼のソリューションはイベントハンドラーのバインドを解除せず、毎回新しいハンドラーを追加するためです。したがって、5つのアイテムを追加すると、検証は1回だけではなく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");
上記の回答としてマークされた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から削除する要素のルールを削除する機能を追加しました。したがって、Domから要素を削除し、それらの検証ルールも削除する場合は、次を呼び出します。
$.validator.unobtrusive.unparseContent('input.something');
私はしばらくの間これをいじり、解決策を破棄し、後で再試行しました（暇なときは信じられないかもしれませんが）。
このスレッドが最後に作成またはコメントされてから、この動作が新しいバージョンのjquery（1.7.2を使用）で変更されたかどうかはわかりませんが、.parseElement(inputElement)動的に作成された要素をフォームに追加しようとすると、正常に機能することがわかりましたすでにバリデーターがロードされています。これは、上記のコメントの1つで@jamesfm（2011年2月15日）によってすでに提案されていましたが、これに取り組んでいた最初の数回は見落としていました。それで、それをより明確にするために別の答えとして追加します。それは良い解決策であり、それほど多くのオーバーヘッドを必要としないと思うからです。後続の回答で提起されたすべての問題に関連するわけではないかもしれませんが、元の質問に対する解決策になると思います。これが私が私の仕事をした方法です：
//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);
@Xhalentのコードスクリプトをコードで見つけましたが、使用していなかったため削除しようとしていたため、このSOの質問につながりました。
このコードは非常にクリーンでシンプルです。
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();
ビオラ！
動的コンテンツの場合は、以下のように目立たない検証を更新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');
}
});
まず、呼び出しは.validatorに対して行う必要があり、検証する必要はないと思います。その後、フォームのIDを渡す必要があります。
$.validator.unobtrusive.parse("#id");
すでにいくつかのエラーが表示されている可能性があるものを追加および削除する必要がある場合は、これが付属しています。これは主に、この質問ページのさまざまなアイデアに基づいています。destroy()JQuery検証のデータ属性を削除するだけでなく、組み込みを使用します。
function resetValidator($form: JQuery) {
$form.validate().destroy();
//reset unobtrusive validation summary, if it exists
$form.find("[data-valmsg-summary=true]")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid")
.find("ul").empty();
//reset unobtrusive field level, if it exists
$form.find("[data-valmsg-replace]")
.removeClass("field-validation-error")
.addClass("field-validation-valid")
.empty();
$form.removeData("unobtrusiveValidation");
}
フォームの入力を動的に変更する前に呼び出します。その後、検証を再初期化します。
resetValidator($form);
//add or remove inputs here ...
$.validator.unobtrusive.parse($form);
注：一部またはすべての入力が検証され、エラーが発生した場合、それらのエラーはリセットされます...ただし、次の検証で正しく返されます。