バリデーションとエラー表示

バリデーションクラスとエラー表示クラスを適用した例を示します。

定義

バリデーションクラス

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

詳細はリファレンスのバリデーションを参照して下さい。

エラー表示クラス

[フォームID]-e-[対象項目のname]-[バリデーション種別]

詳細はリファレンスのエラー表示クラスを参照して下さい。

使用例

全ての例でフォームIDは espf とします。フォームIDが異なる場合は置き換えて下さい。また<form>タグやボタン等のHTML記述は省略して、入力項目を中心に記述しています。

1. テキストフィールド

1-1. 必須のテキストフィールド

必須を意味するバリデーション種別は required なので、バリデーションクラスは espf-required となります。これを適用したい入力項目の class 属性に指定します。

<!-- 入力項目 -->
<input type="text" name="name" class="espf-required">

名前入力の項目の name 属性は name ですので、必須条件に対するエラー表示クラスは espf-e-name-required となります。エラー表示用の div 要素を作り class 属性に指定します。

<!-- 入力項目 -->
<input type="text" name="name" class="espf-required">
<!-- エラー表示 -->
<div class="espf-e-name-required">お名前は必須項目です</div>

1-2. 必須であり、かつメールアドレス形式のテキストフィールド

メールアドレス形式を意味する種別 email を使って、バリデーションクラスは espf-email となります。さらに必須項目としたいので espf-required も合わせて指定します。

<!-- 入力項目 -->
<input type="text" name="mail" class="espf-required espf-email">

入力項目の name が mail なので、必須条件に対するエラー表示クラスは espf-e-mail-required、メールアドレス形式条件に対するエラー表示クラスは espf-e-mail-email となります。

<!-- 入力項目 -->
<input type="text" name="mail" class="espf-required espf-email">
<!-- エラー表示 -->
<div class="espf-e-mail-required">メールアドレスは必須項目です</div>
<div class="espf-e-mail-email">正しいメールアドレス形式で入力してください</div>

条件によらず共通のエラー表示にしたい場合は以下のように書くこともできます。

<!-- 入力項目 -->
<input type="text" name="mail" class="espf-required espf-email">
<!-- エラー表示 -->
<div class="espf-e-mail">メールアドレスは必須項目です</div>

1-3. 必須であり、かつメールアドレス形式、さらにメールアドレスのドメインチェックを行う

前述の1-2.の例に、メールアドレスのドメイン存在チェックを行うバリデーションクラス espf-emailDomain を追加します。

<!-- 入力項目 -->
<input type="text" name="mail" class="espf-required espf-email espf-emailDomain">
<!-- エラー表示 -->
<div class="espf-e-mail-required">メールアドレスは必須項目です</div>
<div class="espf-e-mail-email">正しいメールアドレス形式で入力してください</div>
<div class="espf-e-mail-emailDomain">メールアドレスのドメインが正しくありません</div>

2. テキストエリア

2-1. 必須のテキストエリア

必須項目の required を使いバリデーションクラスは espf-required となります。バリデーションクラスは <input> だけでなく <textarea> や <select> にも使用できます。

<!-- 入力項目 -->
<textarea name="content" class="espf-required"></textarea>
<!-- エラー表示 -->
<div class="espf-e-content-required">内容を入力してください</div>

3. チェックボックス

3-1. 3つのチェックボックスからなるグループでどれか1つ以上を選択する

複数チェックボックスで最低1つを選択する必要がある場合、name 属性の値を同じにして、どれか1つに必須条件のバリデーションクラス espf-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>
<!-- エラー表示 -->
<div class="espf-e-lang-required">言語を1つ以上選択してください</div>

4. ファイル添付

4-1. 複数のファイル添付を許容しつつ上限を3つとする

ファイル数を制限する maxfiles を使います。「添付ファイル数の最大値」を引数として指定する必要があります。3 を指定して、バリデーションクラスは最終的に espf-maxfiles-3 となります。

<!-- 入力項目 -->
<input type="file" name="documents" multiple class="espf-maxfiles-3">
<!-- エラー表示 -->
<div class="espf-e-documents-maxfiles">添付できるファイルは最大3つまでです</div>

4-2. ファイルサイズを3MBytesまでに制限する

ファイルサイズを制限する maxsize を使います。「添付ファイルサイズの最大値」を引数として指定する必要があります。引数は省略可能でデフォルトは10mです。本例では 3MBytes までとしたいので 3m を指定し、バリデーションクラスは最終的に espf-maxsize-3m となります。

<!-- 入力項目 -->
<input type="file" name="file" class="espf-maxsize-3m">
<!-- エラー表示 -->
<div class="espf-e-file-maxsize">ファイルサイズは3MB以下にしてください</div>

4-3. ファイル拡張子が jpg と png のみ受け付ける

ファイル拡張子を制限する fileext を使います。引数には許可する拡張子を _ (アンダースコア)で繋いで指定します。拡張子が jpg と jpeg と png を受け付けたいので引数部分は jpg_jpeg_png となり、バリデーションは最終的に espf-fileext-jpg_jpeg_png となります。

<!-- 入力項目 -->
<input type="file" name="photo" class="espf-fileext-jpg_jpeg_png">
<!-- エラー表示 -->
<div class="espf-e-photo-fileext">拡張子が .jpg か .png のファイルのみアップロード可能です</div>

4-4. ファイル内容がPDFデータの場合のみ受け付ける

ファイルの内容をMIMEタイプを使って判断する filetype を使います。引数には許可するMIMEタイプに含まれる文字列を指定します。PDFの場合はpdf と指定することができ(pdf はPDFデータのMIMEタイプ表記 application/pdf に含まれる文字列)、バリデーションクラスは最終的に espf-filetype-pdf となります。

<!-- 入力項目 -->
<input type="file" name="pdf" class="espf-filetype-pdf">
<!-- エラー表示 -->
<div class="espf-e-pdf-filetype">PDFファイルのみアップロード可能です</div>

4-5. ファイル添付を必須とし、かつ5MBytes以下の画像形式ファイルのみを受け付ける

まず必須項目とするバリデーションクラス espf-required を指定します。

次に、最大サイズをチェックする maxsize を使います。ファイル添付のバリデーション仕様一覧に記載の通り maxsize には「添付ファイルサイズの最大値」を引数として指定します。デフォルト値は10MBです。本例では5MB以下としたいため、明示的に 5m を指定して最終的にバリデーションクラスは espf-maxsize-5m となります。

更に、ファイル種別を MimeType で厳密に判断する filetype を使います。filetype には引数として「添付ファイルのMimeType」が必要です。画像に限定するには image を指定し、最終的にバリデーションクラスは espf-filetype-image となります。

これらを全て入力項目の class 属性に指定します。

<!-- 入力項目 -->
<input type="file" id="attachment" name="attachment" class="espf-requied espf-maxsize-5m espf-filetype-image" multiple>
<!-- エラー表示 -->
<div class="espf-e-attachment-required">ファイルを選択してください</div>
<div class="espf-e-attachment-maxsize">ファイルサイズは5MB以下にしてください</div>
<div class="espf-e-attachment-filetype">画像ファイルのみアップロード可能です</div>