必須項目・バリデーションの設定

必須項目・バリデーションの設定について

FormNestでは、フォームの各フィールドに対して必須項目の設定やバリデーション（入力検証）を設定できます。この記事では、必須項目とバリデーションの設定方法を詳しく解説します。

必須項目とバリデーションとは

必須項目

必須項目は、フォーム送信時に必ず入力が必要なフィールドです。必須項目が未入力の場合、フォームの送信ができません。

バリデーション

バリデーションは、入力された値が正しい形式かどうかをチェックする機能です。例えば、メールアドレスの形式、文字数制限、数値の範囲などをチェックできます。

必須項目の設定方法

基本的な設定手順

フォーム編集画面で、必須項目にしたいフィールドをクリック
フィールド設定画面が開きます
「必須項目」のチェックボックスにチェックを入れる
「保存」ボタンをクリック

💡 ヒント： 必須項目に設定すると、フィールドラベルの横に「必須」マークが表示されます。

必須項目の表示

必須項目に設定されたフィールドは、以下のように表示されます：

フィールドラベルの横に「必須」マーク（赤色）が表示
HTMLのrequired属性が追加される
未入力の場合、エラーメッセージが表示される

必須項目の設定例

一般的に必須項目に設定するフィールド：

お名前：連絡先を特定するために必要
メールアドレス：返信や確認メールの送信先として必要
お問い合わせ内容：フォームの目的を達成するために必要
同意チェック：利用規約への同意確認として必要

任意項目として設定するフィールド：

電話番号：連絡方法の選択肢の一つ
会社名：個人情報のため任意
備考：補足情報のため任意

バリデーションの種類

FormNestでは、フィールドタイプごとに異なるバリデーション機能が利用できます。

フィールドタイプ	利用可能なバリデーション	説明
テキスト	文字種制限、最小文字数、最大文字数、パターン	入力可能な文字の種類や文字数を制限
テキストエリア	最小文字数、最大文字数	入力可能な文字数を制限
メールアドレス	メールアドレス形式	正しいメールアドレス形式かチェック
電話番号	電話番号形式	正しい電話番号形式かチェック
URL	URL形式	正しいURL形式かチェック
数値	最小値、最大値、小数点、マイナス値	数値の範囲や形式を制限
日付	最小日付、最大日付	選択可能な日付の範囲を制限
ファイル	ファイルサイズ、ファイル形式	アップロード可能なファイルを制限
セレクト/ラジオ/チェックボックス	最小選択数、最大選択数	選択可能な項目数を制限

フィールドタイプ別のバリデーション設定

1. テキストフィールドのバリデーション

テキストフィールドでは、以下のバリデーションが設定できます。

文字種制限

入力可能な文字の種類を制限します。

半角英数：半角英字と数字のみ（例：abc123）
半角英字：半角英字のみ（例：abc）
半角数字：半角数字のみ（例：123）
ひらがな：ひらがなのみ（例：あいうえお）
カタカナ：カタカナのみ（例：アイウエオ）
ひらがな・カタカナ：ひらがなとカタカナのみ

設定方法：

フィールド設定画面の「バリデーション」セクションを開く
「文字種制限」から該当する項目にチェック
複数の文字種を選択可能（例：半角英数 + ひらがな）
「保存」をクリック

使用例：

ユーザーID：半角英数
パスワード：半角英数
フリガナ：カタカナ
名前（かな）：ひらがな

文字数制限

入力可能な文字数を制限します。

最小文字数：最低限入力が必要な文字数
最大文字数：入力可能な最大文字数

設定方法：

フィールド設定画面の「バリデーション」セクションを開く
「最小文字数」に数値を入力（例：3）
「最大文字数」に数値を入力（例：50）
「保存」をクリック

使用例：

ユーザー名：最小3文字、最大20文字
パスワード：最小8文字、最大32文字
会社名：最大50文字

パターン（正規表現）

正規表現を使用して、より複雑な入力形式を指定できます。

設定方法：

フィールド設定画面の「バリデーション」セクションを開く
「パターン」に正規表現を入力
「パターンメッセージ」にエラーメッセージを入力（任意）
「保存」をクリック

使用例：

郵便番号：^\d{3}-\d{4}$（123-4567形式）
電話番号：^0\d{1,4}-\d{1,4}-\d{4}$（090-1234-5678形式）

2. テキストエリアフィールドのバリデーション

テキストエリアフィールドでは、文字数制限が設定できます。

設定項目：

最小文字数：最低限入力が必要な文字数
最大文字数：入力可能な最大文字数

使用例：

お問い合わせ内容：最小10文字、最大1000文字
備考：最大500文字

3. メールアドレスフィールドのバリデーション

メールアドレスフィールドでは、自動的にメールアドレスの形式をチェックします。

自動チェック項目：

@マークが含まれているか
ドメイン部分が正しい形式か
ローカル部分（@の前）が正しい形式か

エラーメッセージ：

形式が正しくない場合：「有効なメールアドレスを入力してください。」

4. 電話番号フィールドのバリデーション

電話番号フィールドでは、日本の電話番号形式をチェックできます。

設定項目：

電話番号形式の検証：有効/無効を選択

チェック内容：

数字、ハイフン、括弧、プラス記号のみが使用されているか
ハイフンあり・なしの両方に対応

エラーメッセージ：

形式が正しくない場合：「有効な電話番号を入力してください。」

5. URLフィールドのバリデーション

URLフィールドでは、URLの形式をチェックできます。

設定項目：

URL形式の検証：有効/無効を選択

チェック内容：

http://またはhttps://で始まるか
正しいURL形式か

エラーメッセージ：

形式が正しくない場合：「有効なURLを入力してください。」

6. 数値フィールドのバリデーション

数値フィールドでは、数値の範囲や形式を制限できます。

設定項目：

最小値：入力可能な最小値
最大値：入力可能な最大値
小数点：小数点の入力を許可するか
マイナス値：マイナス値の入力を許可するか

設定方法：

フィールド設定画面の「バリデーション」セクションを開く
「最小値」に数値を入力（例：0）
「最大値」に数値を入力（例：100）
「小数点を許可」にチェック（必要に応じて）
「マイナス値を許可」にチェック（必要に応じて）
「保存」をクリック

使用例：

年齢：最小値0、最大値120、小数点なし、マイナス値なし
数量：最小値1、最大値1000、小数点なし
金額：最小値0、最大値なし、小数点あり
温度：最小値なし、最大値なし、小数点あり、マイナス値あり

エラーメッセージ：

数値でない場合：「数値を入力してください。」
最小値未満の場合：「{最小値}以上の値を入力してください。」
最大値を超える場合：「{最大値}以下の値を入力してください。」
マイナス値が許可されていない場合：「マイナスの数値は許可されていません。」

7. 日付フィールドのバリデーション

日付フィールドでは、選択可能な日付の範囲を制限できます。

設定項目：

最小日付：選択可能な最小日付
最大日付：選択可能な最大日付

設定方法：

フィールド設定画面の「バリデーション」セクションを開く
「最小日付」に日付を入力（例：今日、2024-01-01）
「最大日付」に日付を入力（例：2024-12-31）
「保存」をクリック

使用例：

生年月日：最大日付を「今日」に設定（未来の日付を選択不可）
希望日：最小日付を「今日」に設定（過去の日付を選択不可）
イベント日：最小日付を「今日」、最大日付を「1年後」に設定

エラーメッセージ：

最小日付より前の場合：「{最小日付}以降の日付を入力してください。」
最大日付より後の場合：「{最大日付}以前の日付を入力してください。」

8. ファイルフィールドのバリデーション

ファイルフィールドでは、アップロード可能なファイルを制限できます。

設定項目：

許可ファイルタイプ：アップロード可能なファイル形式（例：jpg, png, pdf）
最大ファイルサイズ：アップロード可能な最大サイズ（MB単位）

設定方法：

フィールド設定画面の「バリデーション」セクションを開く
「許可ファイルタイプ」にファイル形式を入力（カンマ区切り、例：jpg, png, pdf）
「最大ファイルサイズ」に数値を入力（MB単位、例：5）
「保存」をクリック

使用例：

画像アップロード：許可ファイルタイプ「jpg, png, gif」、最大ファイルサイズ「5MB」
資料添付：許可ファイルタイプ「pdf, doc, docx」、最大ファイルサイズ「10MB」
履歴書：許可ファイルタイプ「pdf」、最大ファイルサイズ「5MB」

エラーメッセージ：

ファイルサイズ超過の場合：「ファイルサイズは{最大サイズ}MB以下にしてください。」
許可されていないファイル形式の場合：「許可されていないファイル形式です。許可されている形式: {形式一覧}」

9. 選択系フィールド（セレクト/ラジオ/チェックボックス）のバリデーション

選択系フィールドでは、選択可能な項目数を制限できます。

設定項目：

最小選択数：最低限選択が必要な項目数（チェックボックスのみ）
最大選択数：選択可能な最大項目数（チェックボックスのみ）

設定方法：

フィールド設定画面の「バリデーション」セクションを開く
「最小選択数」に数値を入力（チェックボックスの場合）
「最大選択数」に数値を入力（チェックボックスの場合）
「保存」をクリック

使用例：

興味のある分野（チェックボックス）：最小選択数1、最大選択数3
希望するサービス（チェックボックス）：最小選択数1

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

バリデーションエラーが発生した場合、以下のように表示されます。

エラーメッセージの表示位置

フィールドの下に赤色のエラーメッセージが表示
エラーがあるフィールドの枠線が赤色になる
フォーム送信時に、すべてのエラーが一覧表示される

エラーメッセージのカスタマイズ

一部のバリデーションでは、エラーメッセージをカスタマイズできます。

パターン（正規表現）：パターンメッセージを設定可能
その他のバリデーション：デフォルトのメッセージが使用される

バリデーションの動作タイミング

FormNestでは、2つのタイミングでバリデーションが実行されます。

1. リアルタイムバリデーション（クライアント側）

ユーザーが入力中やフィールドから離れたときに、リアルタイムでバリデーションが実行されます。

入力中：一部のフィールドでリアルタイムチェック
フィールドから離れたとき（blur）：入力内容をチェック
エラーがある場合：すぐにエラーメッセージを表示

メリット：

ユーザーがすぐにエラーに気づける
フォーム送信前にエラーを修正できる
ユーザー体験が向上

2. 送信時バリデーション（サーバー側）

フォーム送信時に、サーバー側でもバリデーションが実行されます。

フォーム送信ボタンをクリックしたとき
すべてのフィールドをチェック
エラーがある場合：送信を中止し、エラーを表示

メリット：

セキュリティが向上（クライアント側のチェックを回避できない）
データの整合性が保証される

⚠️ 重要： クライアント側のバリデーションは、ユーザー体験を向上させるためのものです。セキュリティのため、サーバー側のバリデーションが必ず実行されます。

バリデーション設定のベストプラクティス

1. 必須項目の設定

重要な情報（名前、メールアドレスなど）は必ず必須項目に設定
連絡が不要な場合は、電話番号は任意項目にする
必須項目が多すぎると、ユーザーが離脱する可能性があるため、必要最小限に

2. 文字数制限の設定

データベースの容量を考慮して、適切な最大文字数を設定
最小文字数は、意味のある情報が入力されるように設定
例：パスワードは最低8文字、ユーザー名は最低3文字

3. 数値範囲の設定

現実的な範囲を設定（例：年齢は0〜120）
マイナス値が必要ない場合は、許可しない
小数点が必要ない場合は、許可しない

4. ファイルアップロードの設定

セキュリティのため、許可するファイル形式を厳しく制限
ファイルサイズは、サーバーの設定も考慮
一般的なファイル形式のみを許可（例：画像はjpg, png, gifのみ）

5. エラーメッセージの明確化

エラーメッセージは、ユーザーが理解しやすい内容にする
どのように修正すればよいかがわかるメッセージにする
例：「メールアドレスを入力してください」ではなく「有効なメールアドレスを入力してください」

よくある設定例

例1：お問い合わせフォーム

フィールド	必須項目	バリデーション
お名前	✓	最大文字数50
メールアドレス	✓	メールアドレス形式
電話番号	–	電話番号形式
お問い合わせ内容	✓	最小文字数10、最大文字数1000

例2：会員登録フォーム

フィールド	必須項目	バリデーション
ユーザーID	✓	半角英数、最小3文字、最大20文字
パスワード	✓	半角英数、最小8文字、最大32文字
メールアドレス	✓	メールアドレス形式
年齢	✓	最小値0、最大値120、小数点なし
利用規約への同意	✓	–

例3：資料請求フォーム

フィールド	必須項目	バリデーション
会社名	✓	最大文字数100
お名前	✓	最大文字数50
メールアドレス	✓	メールアドレス形式
電話番号	✓	電話番号形式
資料添付	–	許可ファイルタイプ「pdf」、最大ファイルサイズ「5MB」