Form Observe
- 利用方法
- オプション
  - msg
  - changeClass

Form Observe

semooh作。
Form Observeは、フォームの値が初期値から変更されたことを監視し、変更が保存されずにページから移動しようとした際にアラートを表示してくれるプラグインです。
これを導入することで、入力内容をsubmitせずに他のページへのリンクを押してしまったり、うっかりブラウザの戻るボタンを押してしまったりしても、それまでの変更がいきなり消えてしまうようなことが軽減できるはずです。
Web上で管理ツールなどを作る際などに便利かと。

Download
jQuery Plugin

利用方法

変更を監視したいFormを指定して、FormObserve()メソッドを呼ぶだけです。

$('form').FormObserve();

jGlycyを用いた場合は、次のようになります。

<form jg="FormObserve">
  <input type="text" value="初期値その1" /><br />
  <input type="text" value="xyz" /><br />
  <input type="checkbox" /><input type="checkbox" checked="checked" /><br />
  <textarea cols="50" rows="4">これらを変更したら、下の「確定」ボタンを押して下さい。押しても実際にはどこにも保存されませんが...</textarea><br />
  <input type="submit" value="確定" />
  <input type="reset" value="初期値に戻す" />
</form>

例えば上記デモで値を変更し、そのまま他のページに遷移しようとしてみて下さい。
適当なリンク(例えばjQuery日本語リファレンス)をクリックしても良いですし、ロケーションバーに直接アドレスを入れるなど、なんでも構いません。
変更が破棄される旨のアラートが出ると思います。

但し、実際には、初期状態から全く手を入れないと、次のような問題があります。

メッセージが英語 (一応、初期値はWeb標準語で)
「確定」ボタンを押しても警告が表示される

前者は、オプション設定で好きなメッセージに変えて下さい。

後者に関しては、こういった機能を必要とするようなサービスであればsubmit時などにvalidationが行われるはずなので、それをクリアしてから「保存状態とする」ためのメソッドを投げてもらうことで解決しています。
このように明示的に保存状態に変えるタイミングを通知してもらうことで、例えば画面遷移を伴わないajaxなどによる保存などにも対応可能です。

これを踏まえると、例えば次のような形に出来ます。

<script><!--
jQuery(document).ready(function($){
  $('#input-form1').submit(function(){
    if(your_validation()=='ok'){
       $(this).FormObserve_save();
    }else{
       return false;
    }
    function your_validation() {
      if($('#input-xyz').val().match(/^[xyz]+$/i)){
        return 'ok';
      }else{
        alert('2番目のテキストボックスに入れられるのは、xyzのいずれかだけです。');
      }
    }
  });
  $('#ajax-save-button').click(function(){
    $('#ajax-save').FormObserve_save();
  });
});
//--></script>
<form jg="FormObserve" jg:FormObserve="msg:'変更は保存されていません。\nこのまま移動した場合、変更した内容は破棄されてしまいます。'" id="input-form1">
  <input type="text" value="初期値その1" /><br />
  <input type="text" value="xyz" id="input-xyz" /><br />
  <input type="checkbox" /><input type="checkbox" checked="checked" /><br />
  <textarea cols="50" rows="4">これらを変更したら、下の「確定」ボタンを押して下さい。押しても実際にはどこにも保存されませんが...</textarea><br />
  <input type="text" id="ajax-save" value="このフィールドだけは、隣のボタンで保存できます" size="50" />
  <input type="button" value="簡易保存" id="ajax-save-button" /><br />
  <input type="submit" value="確定" />
  <input type="reset" value="初期値に戻す" />
</form>

Form Observe

利用方法

オプション

msg

changeClass