Skip to content
espar form DOCS

バリデーション

導入準備編で 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
urlURL形式チェック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添付ファイルのMimeTypetype属性が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 としています。2つ目以上のフォームを実装する場合は espf で始まる任意の文字列となりますので注意して下さい(espfRecruit や espfIr など)。

入力チェックは必要な数だけ追加することができます。

テキストフィールド以外でも、ユーザの入力を求めるタグであれば入力チェック(バリデーション)を書くことができます。

espar form では添付ファイルも扱うことができますが、フォームとして許容する添付ファイルの条件を付けることができます。複数の条件を指定する糊塗も可能です。

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

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

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 をクラスとして指定すると、入力されたメールアドレスのドメインが存在しない場合にエラーを表示するようになります。

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

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

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

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