応用編1 - バリデーション

基礎編で espar form の設置と送信まで可能になりました。しかし、まだフォームとしては不十分です。ここでは、フォームに欠かせない、入力チェック(バリデーション)やエラー表示について解説します。

 

バリデーション

esapr form では、フォームの入力項目に条件を指定したり、エラー文言を表示させたりするバリデーションの機能が標準で備わっています。以下は、バリデーション(入力チェック)が動作している様子です。

espar form では、上図のように各入力要素でどのようなチェックを行うかの指定や、対応するエラー文言の指定をhtml上で行います。例えば、上図の「お名前」に該当する html ソースコードは以下のとおりです。

<form method="POST" class="espf">
(省略)
    <tr>
        <th class="thw160 textalign-left">
            <label for="name">お名前</label>&nbsp;<span class="required">必須</span>
        </th>
        <td>
            <div><input type="text" name="name" class="form-control espfEsparFormMonitor-required" value="" id="name" size="50"></div>
            <div class="form-input-error espfEsparFormMonitor-e-name-required">名前は必須項目です</div>
        </td>
    </tr>
(省略)
</form>

入力要素に class を追加したり、特別な class を持つ要素を追加することで、入力チェック(バリデーション)とエラー表示が可能となります。上記の「お名前」の要素に追加されているのは以下2点です。

■ 入力チェック指定

名前を入力する <input> 要素に、espfEsparFormMonitor-required クラスを追加しています。espfで始まる espfEsparFormMonitor はフォームIDを示し、required は必須項目であることを意味します。このように、入力要素に対して

[フォームiD]-[入力チェッククラス]

というルールでクラスを加するだけで、入力チェック(バリデーション)を動作させられます。入力チェッククラスには14種類から選択可能です。詳しくは後述の 入力チェッククラス を御覧下さい。

■ 入力チェックでエラーが発生した時の文言要素

入力チェックを満たさなかった時に表示するエラー文言として、espfEsparFormMonitor-e-name-required クラスを指定した <div> 要素を追加しています。

[フォームID]-e-[対象項目のname]-[入力チェッククラス]

この規則に沿ったクラス名が指定された要素は、エラー発生時に espar form が自動的に表示します。具体的には、上記の例の espfEsparFormMonitor-e-name-required の場合、

• フォームIDが espfEsparFormMonitor で、
• そのフォームの中にある name 属性が name である入力要素で、
• required(必須条件) が満たされなかった場合に

表示するエラーメッセージ要素ということになります。このように、espar form ではフォーム内の入力要素に1つずつ入力チェッククラスを指定し、併せて、エラー発生時の文言要素指定を行うことで入力チェックの機能を設定していきます。

 

入力チェッククラス

以下の入力チェック(バリデーション)が使用できます。input要素、textarea要素、select要素に指定可能です。

入力チェック種別	パラメータ1	説明	例
required		必須チェック	espfEsparFormMonitor-required
email		メールアドレス形式チェック	espfEsparFormMonitor-email
url		URL形式チェック	espfEsparFormMonitor-url
number		符号、小数点、３桁毎のカンマ付き半角数字のチェック	espfEsparFormMonitor-number
digits		半角数字のみの形式チェック	espfEsparFormMonitor-digits
alpha		半角アルファベットのみの形式チェック	espfEsparFormMonitor-alpha
alphanumeric		半角英数字とアンダースコアのみの形式チェック	espfEsparFormMonitor-alphanumeric
zip		郵便番号（半角数字３桁-半角数字４桁、ハイフンは省略可能）	espfEsparFormMonitor-zip
tel		電話番号（半角数字とハイフンで最大15桁、先頭と末尾のハイフンは不可）	espfEsparFormMonitor-tel
minlength	数字	最小文字数	espfEsparFormMonitor-minlength-5
maxlength	数字	最大文字数	espfEsparFormMonitor-maxlength-100
min	数字	最小値	espfEsparFormMonitor-min-0
max	数字	最大値	espfEsparFormMonitor-max-30
equalTo	対象項目のname	一致チェック	espfEsparFormMonitor-equalTo-passwordAgain

バリデーションを行いたい入力要素に

[フォームID]-[入力チェッククラス]

の記法でクラスを追加して下さい。複数の条件を指定する場合は条件の数だけクラスを指定します。以下に示す例は、フォームIDが espfEsparFormMonitor である場合の指定例です。

(例1) 必須で且つ最小文字数5文字のテキストフィールド

espfEsparFormMonitor-required と espfEsparFormMonitor-minlength-5 クラスを追加します。

<input type="text" name="name" class="espfEsparFormMonitor-required espfEsparFormMonitor-minlength-5" id="name" size="50">

(例2) 必須で且つメールアドレス形式のテキストフィールド

espfEsparFormMonitor-required と espfEsparFormMonitor-email クラスを追加します。

<input type="text" name="mail" class="espfEsparFormMonitor-required espfEsparFormMonitor-email" id="mail" size="50">

(例3) 必須のテキストエリア

espfEsparFormMonitor-required を追加します。

<textarea name="content" class="espfEsparFormMonitor-required" id="content" rows="10"></textarea>

 

エラー表示クラス

指定したチェック条件が満たされなかった場合に、表示するエラー文言を指定することができます。以下のルールに沿ったクラス名を指定することで、表示する条件を細かく指定することができます。

クラス名	説明	例1
フォームID-e	フォーム内に一つでもエラーがあれば表示する	espfEsparFormMonitor-e
フォームID-e-対象項目のname	対象項目に一つでもエラーがあれば表示する	espfEsparFormMonitor-e-company
フォームID-e-対象項目のname-入力チェック種別	該当するチェック種別にエラーがあれば表示する	espfEsparFormMonitor-e-company-required

(例1) 必須かつメール形式のテキストフィールドに対するエラー文言要素

フォームIDが espfEsparFormMonitor である場合の指定例です。

<td>
    <input type="text" name="mail" class="form-control espfEsparFormMonitor-required espfEsparFormMonitor-email" value="" id="mail" size="50">
    <div class="form-input-error espfEsparFormMonitor-e-mail-required">メールは必須項目です</div>
    <div class="form-input-error espfEsparFormMonitor-e-mail-email">正しいメールアドレス表記にして下さい</div>
</td>

エラー表示クラスが指定された要素は、エラーが表示されるべき時にはじめて表示されます。