Skip to content
espar form espar form espar form DOCS

バリデーション

本ページでは、espar form のバリデーションの詳細仕様を記します。バリデーションと組み合わせて使用するエラー表示クラスについては、リファレンスのエラー表示クラスを参照して下さい。

バリデーションの仕様

適用可能要素

バリデーションは、<form>タグ内に記述された以下のHTML要素に指定することができます。

  • <input>
  • <textarea>
  • <select>

バリデーションクラス

バリデーションクラスは、以下に定める命名規則に従って決定します。

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

一部のバリデーション種別では、以下のように引数を指定する必要があります。

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

使用方法

命名規則に従って使用するバリデーションクラスを決定し、適用可能要素に class 属性の値として指定します。以下のような手順になります。

  1. バリデーションを適用するフォームのフォームIDを特定する (フォームIDの確認方法)
  2. 使用するバリデーションの種別を選ぶ
  3. 1と2を半角ハイフンで連結する
  4. 使用するバリデーションに引数の指定が必要な場合は値を決める
  5. バリデーションを使用するHTML要素の class 属性に指定する

1つのHTML要素に複数のバリデーションを同時に指定することもできます。具体例は 実装サンプルのバリデーションページを参照して下さい。多数の例を掲載しています。

エラー表示

ユーザの入力が、適用されたバリデーション種別の条件に適合しない場合、エラー表示用のHTML要素を自動的に表示できます。詳しくは、リファレンスのエラー表示クラスを参照して下さい。

バリデーションの一覧

espar form には30種類のバリデーションがあります(2025年4月現在)。以下4種類に大別されます。

カテゴリ数説明
必須指定2フォーム項目の入力を必須とするバリデーション
入力制限16入力内容を特定の形式や長さを制限するバリデーション
判定8入力内容の一致や日付の比較など判定を行うバリデーション
ファイル添付4添付ファイルのサイズや形式を制限するバリデーション

必須指定

必須条件を指定したい場合に使用します。

種別引数説明例
required必須チェックespf-required
requiredInグループ名文字列グループ化した入力要素のうち一つ以上の入力が必須。使用方法は後述のrequiredinを参照espf-requiredIn-someone

入力制限

入力される内容を特定パターンに制限する場合に使用します。

種別引数説明例
emailメールアドレス形式チェックespf-email
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
tNumber
qiiNumber		適格請求書発行事業者番号 (T番号)
(どちらの種別指定でも条件は同一)		espf-tNumber
espf-qiiNumber
length正の整数文字数指定espf-length-8
minlength正の整数最小文字数espf-minlength-5
maxlength正の整数最大文字数espf-maxlength-100
min0または正の整数最小値espf-min-0
max正の整数最大値espf-max-30

判定

入力される内容について判定する場合に使用します。

種別引数説明例
emailDomain-メールアドレス形式におけるドメインチェック(後述のemailDomainの項目を参照)espf-emailDomain
creditcardクレジットカードのチェックディジット検証espf-creditcard
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文字列type属性がfileのinput要素で有効
添付されたファイルのMIMEタイプに、引数に指定した文字列が含まてれていれば許容する。MIMEタイプを使うため fileext より厳密。MIMEタイプはmdnの公式ドキュメントを参照のこと		espf-filetype-image
espf-filetype-pdf

バリデーションの個別仕様や解説

requiredIn

複数の入力要素のうちどれか1つ以上の入力を必須 としたい場合があります。例えば

  • 自宅電話番号と携帯電話番号の入力欄があり
  • 両方の入力は必須ではないがいずれかには入力して貰いたい

といったような場合です。そのような時は requiredIn クラスを使用することができます。

requiredIn では引数として「入力要素をグループ化する文字列」(グループ名)を指定します。

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

具体的には以下のように使用します。(フォームIDは espf とします)

<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>

グループ化された複数の入力要素のうち最低1つの入力が必須となりますので、同じグループに属する入力要素のいずれにも入力されていない場合に限ってエラーが表示されます。上記の例のように、それぞれの入力要素に対応するエラー表示クラスを1つのエラー表示用HTML要素に指定することもできます。

hiragana

全角ひらがなとは、以下に含まれるものです。

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

上記の定義が要件を満たさない場合、独自バリデーションを定義して下さい。

katakana

全角カタカナとは、以下に含まれるものです。

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

上記の定義が要件を満たさない場合、独自バリデーションを定義して下さい。

emailDomain

本バリデーションをメールアドレス用の入力項目に適用すると、入力されたメールアドレスのドメイン部分が実際に存在するドメイン化どうかをチェックします。

存在しないドメインの場合にエラーを表示しますので、「フォームから問い合わせは届いたが、存在しないメールアドレスが入力されていてお客様に連絡できない」という事案の発生を減少させられます。

emailDomain バリデーションは以下のように、email バリデーションと一緒に指定します。(例では必須を意味する required も一緒に指定しています)

<input type="text" name="mail" class="espf-required espf-email espf-emailDomain" value="">
<div class="form-input-error espf-e-mail-emailDomain">メールアドレスが間違っている可能性があります。ドメイン名を確認して下さい。</div>
<div class="form-input-error espf-e-mail-required">メールアドレスは必須項目です。</div>
<div class="form-input-error espf-e-mail-email">正しいメールアドレス形式で入力して下さい。</div>

filetype

MIMEタイプに基づいてアップロードされるファイルの種類を制限できます。バリデーションクラスは以下の命名規則で決定されます。

[フォームID]-filetype-[文字列]

添付されたファイルからブラウザが認識したMIMEタイプに、指定された文字列が含まれているかどうかで判定します。含まれていない場合はファイルを受け付けません。

バリデーションクラスを espf_filetype_pdf とした場合、振る舞いは以下の通りとなります。

  1. PDFデータ形式のファイルがアップロードされる
  2. MIMEタイプに基づき、ブラウザはMIMEタイプを application/pdfとする
  3. バリデーションクラス中に指定された文字列 pdf が application/pdf に含まれる
  4. アップロードファイルを適切と判断して受け付ける

ファイル拡張子の判断で十分な場合は fileext を使用して下さい。

バリデーションの拡張

独自の入力条件を実装して、espar form のバリデーション機能を拡張することができます。例えば、以下のような要件がある場合に有効です。

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

詳しくは、独自バリデーション のページを参照して下さい。