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

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

​

必須オプション

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

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

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

​

ユースケースの例

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

​

検証ルール

​

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

送信前にフィールドが有効であることを確認するための検証ルールを設定できます。検証ルールは 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 を選択し、テキスト要素を選びます。

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