Wix 関数:フォームにカスタム検証を追加する
読了時間:6分
Wix 関数を使用してフォームにカスタム検証を追加すると、フォームが送信される前に、訪問者がフォームに入力した内容を検証することができます。これにより、条件を満たしたデータのみが、フォームを介して送信されるようになります。カスタム検証は、フォームで以下を制御したい場合などに役立ちます:
- 2つの欄に入力されたメールアドレスが一致していることを確認する。
- メールアドレスの入力を半角英数字のみに制限する。
- 利用できるメールエイリアスを制限する(例:Gmail のみ)。
この記事では、フォームにカスタム検証を追加する方法と、メールアドレスを確認する関数を作成する方法について詳しく説明します。

フォームにカスタム検証を追加する
フォームにカスタム検証を追加して、サイト訪問者が送信するデータを制御します。カスタム検証を追加すると、フォームの送信データが条件を満たしているかどうかがチェックされ、満たしていない場合は、フォームにカスタムのエラーメッセージが表示されるようになります。
フォームにカスタム検証を追加する方法:
- サイトダッシュボードの「関数」にアクセスします。
- 「フォーム検証」下で「関数を作成する」をクリックします。
- 「一から作成」をクリックします。
- 「条件」ステップをクリックし、if / else ロジックを使用して関数にパラメータを追加します。
- 関数の出力を設定します:
- 「出力」ステップをクリックします。
- 以下を含めて検証エラーを設定します:
- (オプション)フォーム項目キー:エラーメッセージを特定の項目に適用します。項目キーが追加されていない場合は、エラーメッセージが送信ボタンの下に表示されます。
- エラーメッセージ:カスタム検証が満たされなかった場合に表示されるエラーメッセージを入力します。
- 「追加」をクリックして検証エラーを追加します。
- (オプション)「+ Add Validation(+検証を追加)」をクリックし、別の検証エラーを設定します。
- 「適用する」をクリックして出力を保存します。
- 該当する条件やアクションを追加して、関数の作成を続けます。
- この関数を該当するフォームに接続します:
- 右上にある「その他のアクション」アイコン
をクリックします。
- 「関数設定」を選択します。
- 「選択中のフォーム 1」をクリックし、「+選択」をクリックします。
- 該当するフォームを選択し、「OK」をクリックします。
- 右上にある「その他のアクション」アイコン

- 左上で関数の名前を入力します。
ヒント:これはあなたにのみ表示され、ダッシュボードで機能を識別するのに役立ちます。 - 右上の「有効化」をクリックします。

フォーム項目キーを取得できる場所について:
「出力」パネルに追加するフォーム項目キーは、フォームビルダーでカスタム検証を追加したいフォームを開き、該当する項目で「設定」ボタンをクリックし、右側のパネルで「詳細設定」タブをクリックすると表示されます。


メールアドレスを確認する関数を作成する
関数を使用すると、フォームが送信される前に、メールアドレスの欄に入力されたアドレスと、メールアドレスの確認欄に入力されたアドレスが一致しているかどうかを確認することができます。フォームにこの機能を追加する場合は、以下の手順に従って関数ビルダーで検証エラーを設定してください。
始める前に: 
フォームに、確認用のメールアドレスの項目があることを確認してください。訪問者には、2つ目の項目が確認用であることが分かるよう、項目名を変更して、「メールアドレス(確認用)」などの名前を付けておくことをおすすめします。

メールアドレスを確認する関数を作成する方法:
- サイトダッシュボードの「フォーム・回答内容」にアクセスします。
- 更新するフォーム横の「編集」をクリックするか、新しいフォームを作成します。
- 上部の「設定」タブをクリックします。
- 「高度なフォーム検証」までスクロールダウンし、「検証を作成」をクリックして関数ビルダーを開きます。
- 「ステップを追加」アイコン
をクリックし、「条件」を選択します。

- 「プロパティを選択」をクリックし、通常のメールアドレスの欄のプロパティを選択します。

- 「ロジックを選択」ドロップダウンをクリックし、「が次と一致しない」を選択します。
- 「テキストを入力」横の「カスタマイズ」をクリックし、メールアドレスの確認欄のプロパティを選択します。
ヒント:これにより、両者の欄に入力されたテキストが一致していない場合は、エラーが検出されるようになります。

- 「適用する」をクリックして条件を保存します。
- 「出力」ステップをクリックします。上記で設定した条件が満たされる場合(最初のメールフィールドが 2つ目のメールフィールドのテキストではない)、検証エラーが適用されます。
- (オプション)「フォーム項目キー」を入力し、エラーメッセージを特定の項目に適用します。
注意:項目キーが追加されていない場合は、エラーメッセージが送信ボタンの下に表示されます。 - メールアドレスが一致していない場合に表示される「エラーメッセージ」(例:「メールアドレスが一致していません」など)を入力します。
- 「追加」をクリックして検証エラーを追加します。
- (オプション)「+ Add Validation(+検証を追加)」をクリックし、別の検証エラーを設定します。
- 「適用する」をクリックして出力を保存します。
- (オプション)「フォーム項目キー」を入力し、エラーメッセージを特定の項目に適用します。

- 左上で関数の名前を入力します。
ヒント:これはあなたにのみ表示され、ダッシュボードで機能を識別するのに役立ちます。 - 右上の「有効化」をクリックします。
よくある質問
フォームへのカスタム検証の追加に関する詳細については、以下の質問をクリックしてください。
フォームビルダーから直接関数ビルダーにアクセスすることはできますか?
フォームに追加したカスタム検証をテストすることはできますか?
関数を使用して、フォームで受け付ける注文に手数料を追加することはできますか?