ホーム > サポート・マニュアル > チュートリアル > フォーム > 活用編 第2回 : JSバリデーターを利用してみよう

活用編 第2回 : JSバリデーターを利用してみよう

ドキュメント最終更新日時：2010/09/08 09:58

タグ：フォーム モジュール チュートリアル バリデーター JS 

JSバリデーター

これまでのチュートリアルのバリデーターは、フォームに入力された内容を、サーバーに送信するとサーバーからのレスポンスとしてエラー結果が返ってくるものでした。

そこで今回は、a-blog cmsに標準で搭載されているJavascriptを利用したバリデーター機能(以下、JSバリデーター)を利用してみたいと思います。

JSバリデーターの利点として、エンドユーザーのブラウザ側でエラーを判定するため、エラーがあったときのレスポンスが高速になるというメリットがあります。また、サーバーに余分な負荷をかけずに済むというメリットも挙げられます。

今までのバリデーターとの違い

今回のチュートリアルは編集箇所が大きくなります。JSに頼らない場合との違いを先に挙げます。

  1. input要素のtype属性がsubmitのものについてclass="overlook"の削除が必要
  2. a-blog cmsが標準で搭載しているJavascriptの読み込みが必要
  3. CSSにスタイルの追記が必要
  4. エラーメッセージの記述を書き換える必要
  5. 初期の入力画面( step )にも、再入力画面( step#reapply )と同様にエラー表示の記述が必要

補足として、これから説明する内容で記述すれば、Javascriptがオフになっている環境でもバリデーターは機能します。（サーバーに送信した結果のエラー表示も反映されます）

実際の書き換え

1. class="overlook"の削除

各stepにinput要素のtype="submit"に記述されていたclass="overlook"というクラスを削除してください。

このクラスは、ページ内でa-blog cms標準のJavascriptが読み込まれている場合に、JSバリデーターの動作を抑制するための記述でした。JSバリデーターに対応したエラーメッセージを記述していない場合にJSバリデーターが動作すると、エラー表示もなく送信もできないという状態になってしまうためです。

2. a-blog cms標準のJavascriptの読み込み

サンプルファイルから作成されている場合は、すでにJavascriptを読み込む記述がhead要素内に書かれています。削除してしまっていた場合は、下の3行をhead要素内に追記してください。

<!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script>
<!-- END_MODULE Js -->

3. CSSに追記する

外部スタイルシート、またはhead要素内にstyle要素として、以下のCSSを追記してください。エラーメッセージの表示時と非表示時のそれぞれのスタイルを定義します。

label.validator-result-, label.validator-result-1 {
display: none;
}
label.validator-result-error, label.validator-result-0 {
color: red;
display: block;
}

4. エラーメッセージの記述を書き換える

今までのエラーメッセージの記述

<dt>ハンドルネーム (必須)</dt>
<dd>
<input type="text" name="name" value="{name}" />
<input type="hidden" name="field[]" value="name" />
<input type="hidden" name="name:validator#required" />
<!-- BEGIN name:validator --><p class="notice">ハンドルネームは必須項目です</p><!-- END name:validator -->
</dd>

JSバリデーターのエラーメッセージの記述

<dt>ハンドルネーム (必須)</dt>
<dd>
<input type="text" name="name" value="" />
<input type="hidden" name="field[]" value="name" />
<input type="hidden" name="name:validator#required" id="validator-name-required" />
<label for="validator-name-required" class="validator-result-{name:validator#required}">ハンドルネームは必須項目です</label>
</dd>
5行目
id="validator-name-required" を追加
6行目
テンプレートタグのブロックから、label要素( classとfor属性も必須 )に変更

Javascriptが利用するための記述を加える事で、エラー時にlabel要素のclass名が書き換えられます。それにより、表示/非表示のCSSが操作されることでエラーメッセージとして動作します。

書式

<input type="hidden" name="[対象の項目名]:validator#[オプション名]" id="validator-[対象の項目名]-[オプション名]" />
<label for="validator-[対象の項目名]-[オプション名]" class="validator-result-{[対象の項目名]:validator#[オプション名]}">

全ての項目に対して、このような書式で変更を加えていきましょう。

初期の入力画面( step )にも、再入力画面( step#reapply )と同様に

サーバーに送信される前の動作なので、初期の入力画面でもエラーメッセージが表示される必要があります。再入力画面( step#reaply )と同じように書き換えましょう。

さあ、確認してみましょう

一通り編集し終わったら、動作を確認してみましょう。変更箇所が多いので、編集後のサンプルコードを用意しています。必要に応じてご利用ください。

JSバリデーターを利用すると画面遷移なしで即座にエラーを表示できるため、エンドユーザーに対するレスポンス向上につながります。記述は若干多くなりますが、積極的に利用してみてください。

JSバリデーターを実装したサンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="js" lang="ja" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=%{CHARSET}" />
<title>フォームのサンプル</title><!-- BEGIN_MODULE Js -->
<script type="text/javascript" src="/index.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<style>
label.validator-result-, label.validator-result-1 {
display: none;
}
label.validator-result-error, label.validator-result-0 {
color: red;
display: block;
}
</style>
</head>
<body>
<h1>お問い合わセット</h1>
<!-- BEGIN_MODULE Form -->

<!-- ▼▼▼ 初期の入力画面 ▼▼▼ (このコメントブロックは削除しても影響ありません) -->
<!-- BEGIN step -->
<form action="?step=reapply" method="post">
<dl>
<dt>ハンドルネーム (必須)</dt>
<dd>
<input type="text" name="name" value="{name}" />
<input type="hidden" name="field[]" value="name" />
<input type="hidden" name="name:validator#required" id="validator-name-required" />
<label for="validator-name-required" class="validator-result-{name:validator#required}">
ハンドルネームは必須項目です
</label>
</dd>
<dt>メールアドレス</dt>
<dd>
<input type="text" name="address" value="{address}" />
<input type="hidden" name="field[]" value="address" />
<input type="hidden" name="address:validator#email" id="validator-address-email" />
<input type="hidden" name="address:c" value="a" />
<label for="validator-address-email" class="validator-result-{address:validator#email}">
メールアドレスの書式が正しくありません
</label>
</dd>
<dt>コメント (必須・100文字以内)</dt>
<dd>
<textarea name="comment" cols="50" rows="5">{comment}</textarea>
<input type="hidden" name="field[]" value="comment" />
<input type="hidden" name="comment:validator#required" id="validator-comment-required" />
<input type="hidden" name="comment:validator#maxLength" value="100" id="validator-comment-maxLength" />
<label for="validator-comment-required" class="validator-result-{comment:validator#required}">
コメントは必須項目です
</label>
<label for="validator-comment-maxLength" class="validator-result-{comment:validator#maxLength}">
コメントは100文字以内にしてください
</label>
</dd>
<dt>年代 (必須)</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代"{age:checked#10〜20代} />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代"{age:checked#30〜40代} />30〜40代</label>
<label><input type="radio" name="age" value="50代以上"{age:checked#50代以上} />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" id="validator-age-required" />
<label for="validator-age-required" class="validator-result-{age:validator#required}">
年代は必須項目です
</label>
</dd>
</dl>
<input type="hidden" name="step" value="confirm" />
<input type="hidden" name="id" value="sample" />
<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認" />
</form>
<!-- END step -->

<!-- ▼▼▼ エラー時の再入力画面 ▼▼▼ (このコメントブロックは削除しても影響ありません) -->
<!-- BEGIN step#reapply -->
<form action="?step=reapply" method="post">
<dl>
<dt>ハンドルネーム (必須)</dt>
<dd>
<input type="text" name="name" value="{name}" />
<input type="hidden" name="field[]" value="name" />
<input type="hidden" name="name:validator#required" id="validator-name-required" />
<label for="validator-name-required" class="validator-result-{name:validator#required}">
ハンドルネームは必須項目です
</label>
</dd>
<dt>メールアドレス</dt>
<dd>
<input type="text" name="address" value="{address}" />
<input type="hidden" name="field[]" value="address" />
<input type="hidden" name="address:validator#email" id="validator-address-email" />
<input type="hidden" name="address:c" value="a" />
<label for="validator-address-email" class="validator-result-{address:validator#email}">
メールアドレスの書式が正しくありません
</label>
</dd>
<dt>コメント (必須・100文字以内)</dt>
<dd>
<textarea name="comment" cols="50" rows="5">{comment}</textarea>
<input type="hidden" name="field[]" value="comment" />
<input type="hidden" name="comment:validator#required" id="validator-comment-required" />
<input type="hidden" name="comment:validator#maxLength" value="100" id="validator-comment-maxLength" />
<label for="validator-comment-required" class="validator-result-{comment:validator#required}">
コメントは必須項目です
</label>
<label for="validator-comment-maxLength" class="validator-result-{comment:validator#maxLength}">
コメントは100文字以内にしてください
</label>
</dd>
<dt>年代 (必須)</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代"{age:checked#10〜20代} />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代"{age:checked#30〜40代} />30〜40代</label>
<label><input type="radio" name="age" value="50代以上"{age:checked#50代以上} />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" id="validator-age-required" />
<label for="validator-age-required" class="validator-result-{age:validator#required}">
年代は必須項目です
</label>
</dd>
</dl>

<input type="hidden" name="step" value="confirm" />
<input type="hidden" name="id" value="sample" />
<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認" />
</form>
<!-- END step#reapply -->

<!-- ▼▼▼ 確認画面 ▼▼▼ (このコメントブロックは削除しても影響ありません) -->
<!-- BEGIN step#confirm -->
<dl>
<dt>ハンドルネーム</dt>
<dd>
{name}
</dd><!-- BEGIN address:veil -->
<dt>メールアドレス</dt>
<dd>
{address}
</dd><!-- END address:veil -->
<dt>コメント</dt>
<dd>
{comment}[nl2br]
</dd><!-- BEGIN age:veil -->
<dt>年代</dt>
<dd>
{age}
</dd><!-- END age:veil -->
</dl>

<form action="?step=reapply" method="post">
<input type="hidden" name="takeover" value="{takeover}" />
<input type="hidden" name="step" value="result" />
<input type="hidden" name="id" value="sample" />
<input type="submit" name="ACMS_POST_Form_Submit" value="上記の内容で送信" />
</form>

<form action="" method="post">
<input type="hidden" name="takeover" value="{takeover}" />
<input type="hidden" name="step" value="reapply" />
<input type="hidden" name="id" value="sample" />
<input type="submit" name="ACMS_POST_Form_Chain" value="戻って修正" />
</form>

<!-- END step#confirm -->

<!-- ▼▼▼ 結果画面 ▼▼▼ (このコメントブロックは削除しても影響ありません) -->
<!-- BEGIN step#result -->
<dl>
<dt>ハンドルネーム</dt>
<dd>
{name}
</dd><!-- BEGIN address:veil -->
<dt>メールアドレス</dt>
<dd>
{address}
</dd><!-- END address:veil -->
<dt>コメント</dt>
<dd>
{comment}[nl2br]
</dd><!-- BEGIN age:veil -->
<dt>年代</dt>
<dd>
{age}
</dd><!-- END age:veil -->
</dl>
<p>上記の内容で送信しました。</p>
<!-- END step#result -->

<!-- END_MODULE Form -->
</body>
</html>
このエントリーをはてなブックマークに追加

このドキュメントと関連している内容のエントリー

ドキュメントの内容に関するお知らせフォーム

内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。

お名前
 
メールアドレス(任意)
 
お知らせ内容
Cookieに保存

携帯アクセス解析