現在、ページから移動する前にフォームが変更されたことをユーザーに通知するスクリプトを作成しています (これは ASP.NET MVC アプリです)。
最初に、ユーザーが入力を変更したかどうかを検出する簡単なスクリプトの作成から始め、少しひっくり返してフォームを「ダーティ」として指定しました。
これは単純すぎて、拡張フォーム入力のサポートが不足していたので、次にプラグインを試しました。
私が見つけた最高のものはこれでした: http://mal.co.nz/code/jquery-dirty-forms/
この jquery ダーティ フォーム プラグインはかなりうまく機能しますが、私が必要とする重要な機能が 1 つ欠けています。以前の値をユーザーが入力した値と比較する機能。
たとえば、テキスト フィールドに元々「Foo Bar」という値があり、ユーザーがその値を「Foo」に変更した場合、フォームはダーティになります。
ユーザーがそのテキスト ボックスの値を "Foo Bar" に戻してから、このプラグインを使用すると、フォームは依然として "ダーティ" のままであり、これは私の要件では正しくありません。
必要な機能を実行するプラグインがないため、独自のプラグインを作成する必要があります。このような機能を構築するためのベスト プラクティスは何ですか?
私の考えはこれでした：
- このアプリは MVC であるため、次の技術を使用できます。
- jquery
- json
- データ注釈
私の最初の考えは次のとおりです。
- ページには多くのフォームを含めることができます。各フォームには、最初は false に設定された属性「isDirty」があります。
- 比較する各フィールドの元の値を保存する必要があります（メモ）
- 各フィールドには、そのフィールドを「ハイライトなど」で呼び出すクラス/フラグ/属性「isDirty」を含めることができます。
- これらのフィールド値を JSON NVP データ構造に格納できます
- 送信時に、JavaScript はその JSON 文字列を調べて元の値を調べ、現在の値と比較します。無効な場合は、ダーティ ルールに違反するテキスト フィールドに「ダーティ」フラグ (クラス名を追加) を追加します。 .
パフォーマンスと再利用性は明確な考慮事項です。このパターンを任意のフォームに適用できるはずであり、ほとんど作業を行わずに元の値を使用して検証を実行できるようにする必要があります。
私のニーズに似た既存のパターンを見た人はいますか? 私のアイデアは実現可能ですか？誰かが私が取ることができるより良いルートについて意見を持っていますか? 拡張できるコード サンプルから始めるのは素晴らしいことですが、疑似コードも良いでしょう。
[アップデート]
私がやろうとしていることは一般に「フォームスタッシュ」として知られていますが、Googleはその検索用語にはあまり役に立ちません。
私が取り組んできたこのスクリプトは、私がやりたいことと似ています: (このページから: http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-変更/ )
var formChanged = false;
$(document).ready(function() {
$('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) {
$(this).data('initial_value', $(this).val());
});
$('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() {
if ($(this).val() != $(this).data('initial_value')) {
handleFormChanged();
}
});
$('#my_form .editable').bind('change paste', function() {
handleFormChanged();
});
$('.navigation_link').bind("click", function () {
return confirmNavigation();
});
});
function handleFormChanged() {
$('#save_or_update').attr("disabled", false);
formChanged = true;
}
function confirmNavigation() {
if (formChanged) {
return confirm('Are you sure? Your changes will be lost!');
} else {
return true;
}
}