入力条件チェックを導入する

先のページでメールは飛ぶようなりました。しかし、フォームとしてはまだ完成とは言えません。

フォームの入力要素ごとに、必須項目かどうかや、入力内容が正しい形式かなど、入力要素に合わせた様々な条件を規定する必要があります。また、その条件に適合していない場合はエラーを表示する必要もあるでしょう。これはどんなフォームにも必要な基本機能です。

validation_0-1-0

espar form は標準で搭載しており、これをバリデーション機能と呼びます。1行もプログラムを書く必要がなく、入力条件チェックとエラー表示を簡単に実装できるようになっています。

本ページではバリデーション機能を実装する手順を紹介します。

先のページの実装を終えている読者の方なら容易に実装することができることでしょう。バリデーションもまた「CSSクラスを追加する」ことで機能する仕組みだからです。実装は以下の順に進めていくこととなります。一つ一つの作業は非常にシンプルです。

バリデーションクラスを決定する
入力項目にバリデーションを適用する
エラー用の記述を追加する
動作確認する

1. バリデーションクラスを決定する

バリデーション用のCSSクラスは以下の命名規則で決まります。

[フォームID]-[バリデーション種別]

フォームIDは、フォームを識別する espf で始まる文字列です。バリデーション種別とは入力条件を意味する文字列で、よく使われるものには以下のようなものがあります。(一覧はこちら)

入力条件	バリデーション種別
必須項目である	required
メールアドレス形式である	email
URL形式である	url
電話番号である	tel
郵便番号である	zip

例えば、フォームIDが espf の場合、必須項目であることを意味するバリデーションクラスは、

espf-required

となります。

例外的に、一部のバリデーション種別では「引数」を必要とする場合がありバリデーションクラスは以下のようになります。

[フォームID]-[バリデーション種別]-[引数]

例えば、文字列の最大長を規定する maxlength は、最大長の数値を引数として指定しなければなりません。例えば、最大長が8文字の場合、バリデーションクラスは espf-maxlength-8 となります。

さらに、引数を必要とするバリデーション種別の中には引数が省略できるものもあります。詳しくはバリデーションリファレンスをご覧下さい。

2. バリデーションを適用する

次に、適用したい入力要素にバリデーションクラスを適用します。バリデーションクラスは <input>, <select>, <textarea> の要素に指定できます。

例えば、フォームIDが espf の場合で、名前の入力項目に適用する場合は以下のようになります。

<form class="espf">
...(省略)...
  <tr>
    <th>
      <label for="name">お名前</label><span>必須</span>
    </th>
    <td>
      <div><input type="text" name="name" class="espf-required"></div>
    </td>
  </tr>
...(省略)...
</form>

名前の入力欄の <input> 要素の class 属性に、espf-required のバリデーションクラスを指定していることに注目して下さい。espar form ではこのように、入力項目ごとに必要なバリデーションクラスを必要な数だけ class 属性に指定していきます。

3. エラー用の記述を追加する

入力条件に適合しない場合は、エラー表示が必要です。espar form では、エラーの表示制御を自動で行う仕組みが備わっています。

3-1. エラー表示クラスを決定する

エラー表示にもCSSクラスを使用します。以下の命名規則で決定されます。

[フォームID]-e-[対象の入力項目のname属性値]-[バリデーション種別]

どの入力項目の、どのバリデーション種別に対するエラーなのか…をCSSクラスで表現します。

例えば、バリデーションクラスを適用した名前入力項目のHTMLが以下のようになっている場合、

<input type="text" name="name" class="espf-required">

この入力項目が入力されていない(つまり必須項目であるという条件に適合しない)時のエラー表示クラスは、

espf-e-name-required

となります。name 属性が name である要素の required バリデーションに対するエラーということです。

3-2. エラー表示クラスを適用したHTML要素を追加する

エラー表示クラスを指定したエラー表示用HTML要素を追加します。例えば以下のようになります。

<form class="espf">
...(省略)...
  <tr>
    <th>
      <label for="name">お名前</label><span>必須</span>
    </th>
    <td>
      <div><input type="text" name="name" class="espf-required"></div>
      <div><p class="espf-e-name-required">お名前は必須項目です</p></div>
    </td>
  </tr>
...(省略)...
</form>

espar form が行うのは、エラー表示クラスが適用されたHTML要素を自動的に表示することのみです。エラー表示用HTMLの装飾には一切手を加えませんので、エラー表示らしい見た目が必要な場合はCSSを定義して下さい。

例えば、

      <div><input type="text" name="name" class="espf-required"></div>
      <div><p class="error espf-e-name-required">お名前は必須項目です</p></div>

のようにエラー表示用のCSSクラスを別途指定し、

p.error {
  color: red;
  font-size: 0.8em;
}

のようにエラー用の装飾を定義するようにして下さい。また、エラー表示用のHTML要素は、上記例の構造に沿う必要はありません。エラー表示用クラスが class 属性に指定されていればHTMLタグの種類は制限されません。

4. 動作確認する

入力条件チェックが必要なすべての項目に、バリデーションクラスの適用とエラー表示用HTMLの追加を行えたら、バリデーション機能の実装は完了です。

最後に動作確認を行いましょう。

あえてエラーがでるような入力を試してみて、エラーが表示されるかを確認して下さい。確認画面があるフォームなら[確認]ボタン、確認画面がないフォームなら[送信]ボタンをクリックすると以下のようにエラーが表示される筈です。

validation_0-1-0

期待した通りにエラーが表示されない場合は、以下のページを参照して下さい。

この後の進め方

ここまでの手順で、多くの場合はフォーム実装を完了できている筈です。実装を完了している場合は、最後に迷惑メール誤判定を抑制するを参考に必ずDNSの設定を調整して下さい。

もしフォーム実装の要件が満たせていない場合は、以下ページを参考に高度な実装を行えます。

ページ	実現できる高度な実装
メールテンプレート	メールの内容を入力値によって変える条件分岐
独自バリデーション	独自の入力条件チェックの実装
表示制御クラス	入力画面や完了画面にだけ表示したいメッセージを表示
チャット連携	slackやchatworkなどのチャットサービスに転送
外部API連携	RestAPIを備えた外部サービスやシステムと連携 (Google スプレッドシートやサイボウズ kitnone 等)
複数フォームと値コピー	複数フォームをまたがるウィザード形式のフォームを実装
ファイル添付	ファイル添付を受け付けるフォームを実装
グローバルオブジェクト	細かな振る舞いの制御
コールバック	任意のタイミングで独自の実装を注入