> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# フォームフィールドにルールを追加する

> フォーム入力に必須フィールドと検証ルールを設定し、フォームが送信される前に訪問者が正しい形式でデータを入力するようにします。

要素にルールを設定できます。ルールは、正しいフォームデータを正しい形式で収集するために役立ちます。

## 必須オプション

フォームウィジェット内に必須フィールドを設定できます。訪問者が情報を入力しなかった場合、そのフィールドは無効となります。

ユーザーが必須フィールドに情報を入力しない場合:

* 要素は **invalid** 状態に切り替わります。
* フォームに **FormErrorMessage** 要素を追加している場合、その要素が表示されます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-forms/add-rules-to-your-form-fields/0.png)
</Frame>

**Form** カテゴリーに属するすべての要素タイプを必須にできます。要素がトグルの場合、訪問者はそれをONに切り替える必要があります。要素がチェックボックスの場合、ユーザーはチェックを入れる必要があります。要素が入力フィールドの場合、ユーザーは空のままにすることはできません。

### ユースケースの例

メールアドレス入力、ニュースレターカテゴリーを選択する2つのドロップダウン、利用規約に同意するためのトグルなど、すべての要素を必須にしたいとします。

これらの各要素を選択し、**Required** トグルをONに切り替えます。

## 検証ルール

### フォーム送信時にトリガーされる検証ルール

<Note>
  以下のすべての説明では、次の前提条件を仮定しています: 訪問者が送信ボタンをクリックしたときに何が起こるかを定義するイベントを作成し、関連するアクションでHTTPリクエストを送信します。
</Note>

送信前にフィールドが有効であることを確認するための検証ルールを設定できます。検証ルールは **Input** および **Textarea** 要素のみに関するものです。

たとえば、テキスト入力に間違った形式の情報が含まれている場合、フォームは送信できません。訪問者に入力の修正を求めるエラーメッセージを設定できます。

次のいずれかのオプションを設定できます。

* not empty
* only alphanumeric
* number
* email
* URL
* Text
* Length
* Regular expression

デフォルトでは、検証は訪問者が送信ボタンをクリックしたときのみ行われます。

ただし、訪問者がフィールドとの操作をやめたときにフィールドをチェックするイベントを作成することもできます。

#### FormErrorMessage

**FormErrorMessage** 要素は、検証中にエラーが報告された場合にメッセージを表示します。

フォーム内の要素に特定のエラーメッセージを表示するには、**Text** 要素を使用してイベントに関連付ける必要があります。

### フォーカスが外れたときにフィールドの有効性をチェックするイベントの追加

フォーカスが外れたときにフィールドが有効であることを確認するための検証ルールを設定できます。検証ルールは **Input** および **Textarea** 要素のみに関するものです。

たとえば、テキスト入力に間違った形式の情報が含まれている場合、訪問者に入力の修正を求めるエラーメッセージを送信できます。

この検証ルールを設定するには:

1. 要素の **Input settings** に移動します。
2. リストから **Validation rule** を選択します。
3. エラーメッセージを含む **Text** 要素を追加します。
4. エラーメッセージを該当する入力フィールドの隣に配置します。
5. エラーメッセージを非表示にして、入力値が間違った形式の場合にのみ表示されるようにします。
6. Widget Studioの **Events** セクションに移動します。
7. **Form** イベントを追加します。
8. **By element form value** をクリックします。
9. ドロップダウンメニューで **Validation rule** を選択します。
10. **Add action** をクリックします。
11. **Show element** を選択し、テキスト要素を選びます。

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields/Capture-decran-2023-02-17-a-09.56.51.png)
</Frame>

フォーカスが外れると、要素の値がチェックされ、検証ルールに一致しない場合はウィジェットにエラーメッセージが表示されます。

<Note>
  また、特定のイベントを追加して、エラーメッセージがデフォルトではウィジェットに表示されず、フォーカスが外れたときにエラーが検出された場合にのみ表示されるようにすることもできます。
</Note>

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/create-a-widget-with-the-widget-studio/create-forms/add-rules-to-your-form-fields/Capture-decran-2023-02-17-a-12.22.36.png)
</Frame>
