バリデーション、読み込み中表示、通知メッセージ機能を備えたAjaxフォームの実装

Webアプリでは、フォームに入力された値をチェックしてAjaxでサーバに送信するパターンがよく使われます。ここでは、下記のプラグインを組み合わせてAjaxフォームを実装する方法を紹介します。

jQuery Form Plugin - Ajaxフォーム
jQuery Validation Plugin - 入力チェック
jQuery Loading Plugin - 読み込み中表示
jGrowl Plugin - 通知メッセージ表示

まず、Webページにフォームを用意します。

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery.loading.min.js"></script>
<script type="text/javascript" src="/js/jquery.jgrowl_compressed.js"></script>
</head>
...
<div id="service-add-box">
<p>追加するURLを入力します。</p>
<form id="service-add" action="/api/add" method="post">
<div style="margin-right: 5px;"><input name="url" type="text" maxlength="200" class="required" /></div>
<div style="float: left;" id="service-add-error"></div>
<div style="float: right;"><button id="service-add-submit">追加する</button></div>
<div style="clear: both;"></div>
</form>
</div>

サーバ側はフォームデータを受け取るAPIを用意する必要があります。JavaScriptの動作確認のみであれば、当該パスに空ファイルを置いておいても構いません。

忙しい人は、エントリの最後に貼ってある完成版ソースコードをご参照ください。Step by stepで説明します。

入力チェック

まず、入力値のチェックを実装します。jQuery Validationプラグインを使います。フォームに対して validate() を実行するだけでバリデーションが有効になるという優れものです。

$('#service-add-submit').button();
$('#service-add').validate({  // バリデーションの有効化
  errorLabelContainer: '#service-add-error'
});
//このコードは $(document).ready() で実行するようにしてください。

これで、フォームが空っぽの場合にエラーが表示されるようになりました。エラーメッセージは自由にカスタマイズ可能です。

チェック条件はform要素のclass属性で指定します。上記では required を指定しておいたので、値がないとエラーになります。

Ajaxフォーム

フォームデータをAjaxで送信するようにしましょう。jQuery Formプラグインを使います。フォームに対して ajaxSubmit() を実行するだけでAjaxでデータを送信してくれます。

$('#service-add-submit').button();
$('#service-add').validate({
  errorLabelContainer: '#service-add-error',
  submitHandler: function(form){
    $(form).ajaxSubmit({  // Ajaxフォームの送信
      success: function(data){
        console.log(data);
      }
    });
  }
});

これで、ボタンをクリックしてもページ遷移しないようになりました。見た目に変化はありませんが、裏でサーバ側にフォームデータがPOSTされています。

通知メッセージ表示

通知メッセージを表示してみましょう。jGrowlプラグインを使います。$.jGrowl()を実行するだけで格好良いポップアップメッセージを表示してくれる優れものです。

$('#service-add-submit').button();
$('#service-add').validate({
  errorLabelContainer: '#service-add-error',
  submitHandler: function(form){
    $(form).ajaxSubmit({
      success: function(data){
        console.log(data);
        $.jGrowl('設定を保存しました。');
      },
      error: function(){
        $.jGrowl('設定を保存できませんでした。しばらく経ってから再度試してください。');
      }
    });
  }
});

これで、エラー時にも通知メッセージが表示されるようになりました。

読み込み中表示

ボタンをクリックしてからサーバが応答を返すまでタイムラグがあるため、読み込み中のアイコンを表示するようにしましょう。

読み込み中のアイコンは "loading icon" 等でググるとたくさん見つかります。気に入ったものをダウンロードしてWebサイトに配置しておきます。

$('#service-add-submit').button();
$('#service-add').validate({
  errorLabelContainer: '#service-add-error',
  submitHandler: function(form){
    $(form).loading({
      img: '/css/loading1.gif',
      align: 'center'
    });
    $(form).ajaxSubmit({
      success: function(data){
        console.log(data);
        $.jGrowl('設定を保存しました。');
      },
      error: function(){
        $.jGrowl('設定を保存できませんでした。しばらく経ってから再度試してください。');
      },
      complete: function(){
        $(form).loading(false);
      }
    });
  }
});