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

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

 

バリデーション

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

validation_0-1-0

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 espf-required" value="" id="name" size="50"></div>
            <div class="form-input-error espf-e-name-required">名前は必須項目です</div>
        </td>
    </tr>
(省略)
</form>

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

■ 入力チェック指定

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

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

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

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

上記のhtmlでは espf-e-name-required クラスを指定した <div> 要素を追加しています。これは、入力チェックを満たさなかった時に表示したいエラー文言です。

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

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

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

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

 

入力チェッククラス

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

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

入力チェック(バリデーション)を行いたい入力要素に

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

の記法でクラスを追加して下さい。複数の条件を指定する場合は条件の数だけクラスを指定します。なお、input要素の type が checkbox や radio の時は、グループ内のどれか1つのタグに指定されていればokです。

以下に示す例は、フォームIDが espf である場合の指定例です。

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

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

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

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

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

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

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

espf-required を追加します。

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

(例4) 必須の且つメールアドレス形式、更にメールアドレスのドメインチェックを行う

espf-required, espf-email, espf-emailDomain を追加します。

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

(例5) 3つのチェックボックスからなる選択必須のグループ

同じ name の checkbox のグループ内のどれか1つの input 要素に espr-required クラスを追加する

<input type="checkbox" name="lang" value="Japanese" id="lang-ja"><label for="lang-ja">日本語</label>
<input type="checkbox" name="lang" value="English" id="lang-en"><label for="lang-en">英語</label>
<input type="checkbox" name="lang" value="Chinese" id="lang-zh" class="espf-required"><label for="lang-zh">中国語</label>

 

エラー表示クラス

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

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

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

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

<td>
    <input type="text" name="mail" class="form-control espf-required espf-email espf-emailDomain" value="" id="mail" size="50">
    <div class="form-input-error espf-e-mail-required">メールは必須項目です</div>
    <div class="form-input-error espf-e-mail-email">正しいメールアドレス表記にして下さい</div>
    <div class="form-input-error espf-e-mail-emailDomain">メールアドレスのドメインが誤っている可能性があります</div>
</td>

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

エラー発生時にエラー文言が表示されない場合は…

エラー表示クラスは [フォームID]-e-[対象項目のname]-[入力チェック種別] という表記ルールに沿った表記になっている必要があります。エラー表示クラスの名前が正しく指定されているか、以下をご確認下さい。

  • [フォームID]部分は正しいフォームIDになっていますか?
  • [対象項目のname]部分は、input要素のname属性値と一致していますか?
  • [入力チェック種別]部分に対応する入力チェック規則が input要素のクラスに指定されていますか?

エラー文言が表示されない場合、エラー表示クラスの表記に誤りがあることが大半です。特に、[入力チェック種別]の部分が間違えやすいですのでご留意下さい。どうしても表示されない場合は、応用編6 - デバッグやテストのページで紹介している開発ツールを使って頂くと原因をほぼ特定できますので、ご利用をご検討下さい。

エラー文言が見えてしまう場合は...

エラー表示クラスを記述すると、フォームが表示される際にエラー文言が一瞬ちらついて表示されることがあります。そのような場合は、該当する要素に display: none; のスタイルを明示的に指定しておいて下さい。