実装編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
requiredIn グループ名文字列 グループ化した入力要素のうち一つ以上の入力が必須
使用方法は後述のrequiredin-の使い方を参照		 espf-requiredIn-someone
email メールアドレス形式チェック espf-email
emailDomain メールアドレス形式におけるドメインチェック
(後述のemailDomainバリデーションについての項目を参照)		 espf-emailDomain
url URL形式チェック espf-url
number 符号、小数点、３桁毎のカンマ付き半角数字のチェック espf-number
digits 半角数字のみの形式チェック espf-digits
alpha 半角アルファベットのみの形式チェック espf-alpha
alphanumeric 半角英数字とアンダースコアのみの形式チェック espf-alphanumeric
hiragana 全角ひらがなの形式チェック(全角ひらがなの定義は後述を参照) espf-hiragana
katakana 全角カタカナの形式チェック(全角カタカナの定義は後述を参照) espf-katakana
zip 郵便番号（半角数字３桁-半角数字４桁、ハイフンは省略可能） espf-zip
tel 電話番号（半角数字とハイフンで最大15桁、先頭と末尾のハイフンは不可） espf-tel
creditcard クレジットカードのチェックディジット検証 espar-creditcard
minlength 数字 最小文字数 espf-minlength-5
maxlength 数字 最大文字数 espf-maxlength-100
min 数字 最小値 espf-min-0
max 数字 最大値 espf-max-30
equalTo 対象項目のname 一致チェック espf-equalTo-passwordAgain
today 日付 パラメタの日付当日かをチェック
日付パラメタは YYYYMMDD のように指定する
YYYYMM, YYMM, YY での指定も可能		 espf-today-20240401
future 日付 パラメタの日付より未来かをチェック espf-future-20240401
todayOrFuture 日付 パラメタの日付当日か未来かをチェック espf-todayOrFuture-20240401
past 日付 パラメタの日付より過去かをチェック espf-past-20240401
todayOrPast 日付 パラメタの日付より過去か当日かをチェック espf-todayOrPast-20240401
maxfiles 添付ファイル数の最大値 type属性がfileのinput要素でmultiple指定がある場合のみ有効
添付できるファイル数を指定最大数以下にする
メールテンプレートの設定で「添付ファイルを送信する」をONにすること		 espf-maxfiles-3
maxsize 添付ファイルサイズの最大値 type属性がfileのinput要素でのみ有効
添付ファイルサイズを指定サイズ以下に制限する。バイト単位で指定。k(キロバイト)やm(メガバイト)の単位表記も使用可能。指定がない場合の添付ファイルのサイズ上限は10MBとなる
メールテンプレートの設定で「添付ファイルを送信する」をONにすること		 espf-maxsize-3m
fileext 添付ファイルの拡張子 type属性がfileのinput要素で有効
拡張子を制限することができる。複数の拡張子を許容したい場合は _ (アンダースコア)で繋げる		 espf-fileext-pdf
espf-fileext-jpg_png_gif
filetype 添付ファイルのMimeType type属性がfileのinput要素で有効
添付されたファイルのMimeType文字列でマッチしたら許容する。MimeType文字列を使うのでfileextより厳密。MimeTypeについてはMIME タイプ (IANA メディアタイプ)を参照		 espf-filetype-image
espf-filetype-pdf

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

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

の記法でCSSクラスを追加して下さい。複数の条件を指定する場合は条件の数だけクラスを指定します。なお、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>

(例6) 必須で5MBytes以下の画像形式ファイルのみを受け付ける複数指定可能なファイル添付

最大容量指定のクラス maxsize にパラメタの5mを指定して espf-maxsize-5m を指定します。また同様にファイル種別を指定する filetype にパラメタimageを指定して espf-filetype-image を指定します。(画像ファイルの MimeType文字列 は image/png や image/jpg なので画像であればマッチする)

<input type="file" id="attachment" name="attachment" class="espf-requied espf-maxsize-5m espf-filetype-image" multiple>

 

requiredIn の使い方

複数の入力要素のうちどれか1つ以上の入力を必須 としたい場合があります。例えば、自宅電話番号と携帯電話番号の入力欄があり、両方の入力は必須ではないがいずれかには入力して貰いたい場合です。そのような時に requiredIn クラスを使用することができます。

requiredIn ではフォームIDを接頭辞に、入力要素をグルーピングする文字列を末尾に指定した以下のようなクラス名となります。

[フォームID]-requiredIn-[グループ名]

以下に フォームIDが espf の場合に requiredIn を使用している例を示します。

<div>
    <label>電話番号(自宅)</label>
    <input type="text" name="telhome" class="espf-requiredIn-tel">
</div>

<div>
    <label>電話番号(携帯)</label>
    <input type="text" name="telmobile" class="espf-requiredIn-tel">
</div>

<div>
    <div style="color:red;" class="espf-e-telhome-requiredIn espf-e-telmobile-requiredIn">自宅か携帯のいずれか一つ電話ん番号を入力して下さい</div>
</div>

requiredIn の同じクラス指定がされた複数の入力要素のうち1つの入力を必須とします。この例では、input要素2つの両方に espf-requiredIn-tel が指定されており、いずれかが入力されていなければエラーを表示します。

 

hiragana と katakana について

全角ひらがなや全角カタカナを条件とする場合には hiragana クラスや katakana クラスを使用できます。それぞれが全角ひらがな・全角カタカナとみなすものは以下の通りとなっています。

全角ひらがなとみなされるもの

ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんゔゕゖ
゛゜ゝゞゟ
・ー（）
全角スペース

全角カタカナとみなされるもの

ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶヷヸヹヺ
゛゜
・ー（）
全角スペース

上記の全角ひらがな・全角カタカナの定義が要件を満たさない場合は、独自バリデーションを定義することで対応が可能です。

 

エラー表示クラス

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

クラス名 説明 例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要素のクラスに指定されていますか？

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

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

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

 

emailDomain バリデーションについて

espar form v1.4.2 (2019年8月リリース)から「入力されたメールアドレスのドメインが存在するかどうか」を確認する特別なチェック機構が搭載されました。本機能を使用すると「フォームから問い合わせは届いたが、存在しないメールアドレスが入力されていてお客様に連絡できない」という事故の発生を少なくすることができます。

例えば、メールアドレスが tanaka@feedtailor.jp である田中さんが問い合わせフォームを入力したとしましょう。しかし、入力時に田中さんは tanaka@feedtailer.jp と綴りをtypoしてしまいました(oをeと間違って入力)。もしフォームでメールアドレス以外の連絡手段を入力して貰っていない場合、問い合わせを受けとった側は、田中さんには一切連絡をとることができません。メールアドレスが間違っているので、メールを送っても届かないからです。

このような状況を極力避けるために用意されたのが emailDomain バリデーションクラスで、以下のように使用します。

<input type="text" name="mail" class="espf-required espf-email espf-emailDomain" value="">
<div class="form-input-error espf-e-mail-emailDomain" style="display:none;">メールアドレスが間違っている可能性があります。ドメイン名を確認して下さい。</div>

[フォームID]-emailDomain をクラスとして指定すると、入力されたメールアドレスのドメインが存在しない場合にエラーを表示するようになります。

emailDomain の制約

emailDomain バリデーションは基本的に全てのブラウザで機能しますが、

Windows7 + Internet Explorer11

という組み合わせでのみ動作しません。Windows7 の IE11 の実装に問題があるためです。Win7 + IE11 環境では、emailDomain バリデーションが指定されていても、ドメインの実在チェックを行いませんので御留意下さい。

 

独自のバリデーション定義について

フォームによって、独自のバリデーションが必要になることがあります。例えば以下のようなエラーチェックをしたい場合です。

  • 携帯3キャリアのメールアドレスの場合はエラーにしたい
  • 全角スペースを含む場合はエラーにしたい
  • 日付表記の文字列で YYYY.MM.DD になっていない場合はエラーにしたい
  • 特定のアルファベットを含む場合はエラーにしたい

このようなバリデーションはフォーム固有である場合が多いため、espar form では標準で用意していません。その代わりに、espar form では独自のバリデーションを定義することができます。詳しくは 独自バリデーション をご覧下さい。