基礎編 第4回 : バリデーター&コンバーター

入力された値のチェックと変換

a-blog cmsのフォームには、入力された値のチェックや変換といった、フォームオプションと呼ばれる機能があります。

バリデーター

入力された値を指定した条件でチェックします（必須チェックなど）

コンバーター

入力された値を指定した形式に変換します（全角→半角など）

バリデーター

それでは、第3回 基礎編 : 入力項目を追加してみようで追加した[年代]の項目を必須入力にしてみましょう。

チェック機能の実装

まず、その項目が必須入力であるというチェック機能を実装します。

必須入力の設定を加えたサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代" />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代" />30〜40代</label>
<label><input type="radio" name="age" value="50代以上" />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" />
</dd>

7行目が必須項目のチェックとして、追加された記述です。この記述を、入力画面( step )と、再入力画面( step#reapply )の両方に追記してください。

<input type="hidden" name="[対象の項目名]:validator#[オプション名]" />

チェック対象のフォーム項目のname属性を指定し、最後にオプション名を指定します。チェック用のオプションは複数用意されています。ここでは、サンプルテンプレートに使用されているものだけ、ご紹介します。

required

必須項目が入力されているかチェックするオプションです

maxLength

文字数の上限を設定するオプションです

email

メールアドレスの書式として正しいかをチェックするオプションです

他のオプションについては、リファレンス：フォームオプションをご覧ください。

エラー表示の実装

チェック機能を実装したら、今度はエラーが返ってきた時の表示を実装します。

エラー表示のブロックを加えたサンプルコード

<dt>年代</dt>
<dd>
<label><input type="radio" name="age" value="10〜20代" />10〜20代</label>
<label><input type="radio" name="age" value="30〜40代" />30〜40代</label>
<label><input type="radio" name="age" value="50代以上" />50代以上</label>
<input type="hidden" name="field[]" value="age" />
<input type="hidden" name="age:validator#required" />
<!-- BEGIN age:validator --><p>この項目は必須入力です</p><!-- END age:validator -->
</dd>

8行目にサンプルテンプレートの他の項目と同じようにエラー表示のブロックが加わりました。このブロック内は、指定された項目についてのエラーがあったときだけ表示されます。

<!-- BEGIN [対象の項目名]:validator --><p>[エラーメッセージ]</p><!-- END [対象の項目名]:validator -->

エラーメッセージは自由に設定できるので、他の項目のエラーメッセージも、その項目につけられたバリデーターの内容に合わせて書き換えてみましょう。また、実際に入力をしてエラー表示の動作を確認してみましょう。

コンバーター

それでは次に、メールアドレスの欄に入力された値に全角英数字が含まれていた場合に、半角英数字に変換する機能を実装します。

現在の動作を確認してから実装してみる

コンバーターを実装する前に、メールアドレスの欄に全角英数字を含めてメールアドレスを入力してみましょう。バリデーターのエラーが表示されたのではないでしょうか？　これは、全角英数字が含まれている時点で、メールアドレスとして不適合であるためにエラーが表示されている状態です。

全角英数字を半角英数字に変換するサンプルコード

<dt>メールアドレス</dt>
<dd>
<input type="text" name="address" value="{address}" />
<input type="hidden" name="field[]" value="address" />
<input type="hidden" name="address:validator#email" />
<input type="hidden" name="address:converter" value="a" />
</dd>

6行目がコンバーターの記述です。この記述を、入力画面( step )と、再入力画面( step#reapply )の両方に追記してください。

<input type="hidden" name="[対象の項目名]:converter" value="[変換オプション]" />

変換オプションはPHPのmb_convert_kana関数に準拠します。

改めて動作を確認してみる

記述し終わったら、改めてメールアドレスの欄に全角英数字を含めてメールアドレスを入力して動作を確認してみましょう。正しく実装できていれば、今度はエラーが表示されず、全角で入力した部分も半角に変換されているのではないでしょうか？

この機能を利用すれば、郵便番号や電話番号はもちろん、住所などの数字も半角、または全角に統一することができます。エンドユーザーに半角や全角といった入力の指定を求めずに、適切な形で情報を得ることができます。

使いこなしてユーザビリティの向上を

フォームオプションを使いこなすことで、フォーム入力におけるユーザビリティを改善することができます。活用編では、バリデーター機能を中心に、更に掘り下げていきます。

まずは基礎編の完成を目指し、基礎編の最後になる第5回のチュートリアルに続きます。

---