バリデーター＆コンバーター

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

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

バリデーター

[年代]の項目を必須入力にしてみましょう。

チェック機能の実装

まず、その項目が必須入力であるというチェック機能を実装します。
必須入力（required）の設定を加えたサンプルコード

<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属性を指定し、最後にオプション名を指定します。チェック用のオプションは複数用意されています。ここでは、サンプルテンプレートに使用されているものだけ、ご紹介します。

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

画像、ファイルの場合の必須チェック

フォームにおけるファイル、画像アップの入力項目に対して、チェック機能（バリデーション）の必須チェックを使う場合の記述方法を補足します。

<input type="hidden" name="photo:v#required" />

上記の方法では、ファイルを添付していても、エラーになってしまいます。そこで下記のように記述してください。この記述方法で必須チェックが有効になります。

<input type="hidden" name="photo@path:v#required" />

エラー表示の実装

チェック機能を実装したら、今度はエラーが返ってきた時の表示を実装します。
エラー表示のブロックを加えたサンプルコード

<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関数に準拠します。

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

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

ファイル、画像の必須チェック

フォームにおけるファイル、画像アップの入力項目に対して、チェック機能（バリデーション）の必須チェックを使う場合の記述方法を補足します。

通常の書き方で必須チェックを記述すると下記のようになります。

<input type="hidden" name="photo:v#required" />

上記の方法では、ファイルを添付していても、必須チェックを行ってくれません。そこで下記のように記述してください。この記述方法で必須チェックが有効になります。

<input type="hidden" name="photo@path:v#required" />