バリデーター＆コンバーター
入力された値のチェックと変換
a-blog cms のフォームには、入力された値のチェックや変換を行う「フォームオプション」という機能があります。
| 種類 | 説明 |
|---|---|
| バリデーター | 入力された値を指定した条件でチェックします（必須チェックなど） |
| コンバーター | 入力された値を指定した形式に変換します（全角→半角など） |
バリデーター
ここでは、メールアドレスの入力欄を「必須入力」であることをチェックするように設定してみましょう。
バリデーターの指定
<input type="text" name="email" value=""> <input type="hidden" name="field[]" value="email"> <input type="hidden" name="email:v#required">
3行目が追加された記述です。この記述を入力画面（step）と再入力画面（step#reapply）の両方に追加してください。
<input type="hidden" name="[対象の項目名]:validator#[オプション名]" />
対象となるフォーム項目の name 属性を指定し、最後にバリデーターオプション名を指定します。
| オプション | 説明 |
|---|---|
| required | 必須項目が入力されているかチェックするオプションです |
| maxLength | 文字数の上限を設定するオプションです |
| メールアドレスの書式として正しいかをチェックするオプションです |
他のオプションについては、リファレンス：フォームオプションを参照してください。
画像・ファイルの場合の必須チェック
ファイルアップロードや画像アップロードの入力項目で必須チェックを行う場合は、通常の入力項目とは記述方法が異なります。
次のように記述すると、ファイルを選択していてもエラーとなってしまいます。
<input type="hidden" name="photo:v#required" />
ファイルや画像の必須チェックを行う場合は、以下のように @path を付与してください。
<input type="hidden" name="photo@path:v#required" />
この記述で正しく必須チェックが機能します。
エラー表示の実装
バリデーターを設定したら、次にエラー発生時の表示を実装します。
<input type="text" name="email" value="{email}">
<input type="hidden" name="field[]" value="email">
<input type="hidden" name="email:v#required">
<!-- BEGIN email:validator -->メールアドレスを必須入力です。<!-- END email:validator -->
<input type="text" name="email" value="{{ email.value }}">
<input type="hidden" name="field[]" value="email">
<input type="hidden" name="email:v#required">
{% if email.invalid %}<p>メールアドレスを必須入力です。</p>{% endif %}
エラー表示のブロックが加わりました。このブロック内は、指定されたフィールドについて何かしらエラーがあったときだけ表示されます。
<!-- BEGIN [対象の項目名]:validator --><p>[エラーメッセージ]</p><!-- END [対象の項目名]:validator -->
{% if [対象の項目名].invalid %}<p>[エラーメッセージ]</p>{% endif %}
コンバーター
次に、メールアドレス欄に入力された全角英数字を自動的に半角英数字へ変換する機能を実装します。
コンバーターを設定する前に、メールアドレス欄へ全角英数字を含むメールアドレスを入力してみてください。メールアドレス形式のチェックに失敗し、バリデーションエラーが表示されるはずです。
全角英数字を半角英数字に変換するサンプルコード
<dt>メールアドレス</dt>
<dd>
<input type="text" name="email" value="{email}" />
<input type="hidden" name="field[]" value="email" />
<input type="hidden" name="email:validator#email" />
<input type="hidden" name="email:converter" value="a" />
</dd>6行目がコンバーターの設定です。この記述を、入力画面( step )と、再入力画面( step#reapply )の両方に追記してください。
<input type="hidden" name="[対象の項目名]:converter" value="[変換オプション]" />
変換オプションはPHPのmb_convert_kana関数のオプションに準拠します。
設定後、再度全角英数字を含むメールアドレスを入力して動作を確認してみましょう。正しく設定できていれば、全角英数字が自動的に半角英数字へ変換され、エラーは表示されません。
この機能を利用することで、郵便番号や電話番号、住所中の数字などを半角または全角へ統一できます。利用者に半角・全角の入力を求めることなく、統一された形式のデータを取得できます。