フォームの検証ガイドを使用すると、フォームのフィールドに入力されたデータを指定し、検証することで、入力の一貫性、正確性、完全性を確保できます。具体的には、フォームの検証ガイドは以下を提供します。
- フォーム内の各入力フィールドに関するガイダンスと想定される入力内容に関する追加情報。
- 入力された情報がそのフィールドに必要な基準を満たしているかどうかを確認するための入力検証。
フォーム内の個々のフィールドに、次の形式を要求するように設定できます。
- メールアドレス。これは次の形式である必要があります。
username@domain.domainsuffix例：jane.doe@example.com - 電話番号。スペース、ハイフン、ピリオド、かっこを使用できます（例：123-456-7890）。場所を示すために、電話番号の先頭にプラス記号（+）を付けることもできます（例：米国では+1。+1 (123) 456 7890）。
- 日付。次のいずれかの形式である必要があります：MM/DD/YYYY、DD/MM/YYYY、MM-DD-YYYY、DD-MM-YYYY、またはYYYY-MM-DD。
- URL。これは標準的なリンク形式に従った文字列である必要があります。
- 文字の長さ。ユーザーは、応答の最低文字数が必要か、または一定文字数未満である必要があるかを選択できます。
-
数値。このルールにより、入力値が数値であることを確認します。このルールには、小数点を許可するオプションがあります。
権限
ガイドの役割には、ガイド作成者、ガイド公開者、およびガイドコンテンツ編集者という3つがあり、それぞれ権限が異なります。サブスクリプション管理者ユーザーは以下のすべての権限を持っています。アプリ管理者は割り当てられたアプリのガイド役割権限をすべて持っています。
- ガイド作成者の役割の権限を持つPendoユーザーは、ゼロからガイドを作成および編集することができます。また、公開されていない既存のガイドを編集することもできます。
- ガイド作成者またはガイドコンテンツ編集者の役割権限を持つPendoユーザーは、レイアウトからガイドを作成・編集し、非公開ガイドをアーカイブすることができます。
- ガイド公開者の役割の権限を持つPendoユーザーは、ガイドを公開・スケジュールし、公開ガイドと非公開ガイドの両方をアーカイブできます。
- すべてのガイドの役割は、ドラフト、ステージング、無効のガイドをアーカイブおよび削除できます。
必要に応じて、以下のガイド権限を組み合わせてカスタムユーザーの役割を作成することもできます。
- ゼロからガイドを作成、編集する。
- レイアウトからガイドを作成および編集する。
- ガイドを公開する。
- 公開ガイドを編集、アーカイブ、削除します。
- ドラフト、ステージング中、非アクティブなガイドをアーカイブおよび削除します。
詳細については、「役割と権限」を参照してください。
フォームの検証のエンドユーザー体験
訪問者が、上記いずれかの形式を必須とするように設定したフィールドを選択すると、フォームの検証ガイドを作成する際に指定したヘルプテキスト（例：「メールアドレスを入力してください」）とルールテキスト（例：「有効なメールアドレスである必要があります」）が表示されます。
フォームの入力検証では、訪問者がそのフィールドへの入力を終えるまで、入力内容の有効性に関するフィードバックは表示されません。訪問者が誤った形式で入力し、Enter を選択するか、フィールド以外を選択すると、フィールドの枠線が赤色になります。
訪問者が修正するためにフィールドを再選択すると、ルールテキストが赤くハイライト表示され、その横にバツ（X）アイコンが表示されます。訪問者が有効な入力を行うと、ルールテキストのハイライト表示が緑色に変わり、その横にチェックマークが表示されます。
フォームの検証を作成する
フォームの入力検証を作成するには、2つの手順があります：Pendoでガイドを作成し、次にビジュアルデザインスタジオでフォームの各フィールドに検証を追加します。
ステップ1. フォームの検証ガイドを作成する
- ［ガイド］>［フォームの検証］に移動し、次に［フォームの検証を作成］を選択します。これにより、［フォームの検証を作成］ウィンドウが開きます。
- サブスクリプションに複数のアプリケーションがある場合は、［アプリケーション］ドロップダウンメニューからアプリケーションを選択してください。
- ［フォーム名］にフォーム検証ガイドの名前を入力してください。
- ウィンドウの右下にある［作成］を選択します。これにより、新しいフォーム検証ガイドの詳細ページが開きます。
ステップ2. フォームフィールドにバリデーションを追加する
新しいフォーム検証ガイドの詳細ページは、少なくとも1つのフィールドに検証を追加するまで空です。［アプリで編集］を選択し、アプリケーションまたはフォームの場所のURLを入力して、［デザイナーを起動］を選択します。これにより、新しいタブでアプリケーション上にビジュアルデザインスタジオが開きます。
- ［フォームを編集］ウィンドウで、［フォームを選択］を選択します。これにより、選択モードが開きます。
- フォーム入力フィールドを含むアプリケーションの領域（フォームコンテナ）を選択してください。画面上でマウスを動かすと、ページ上の領域を囲む赤い点線の枠に基づいて、どの領域を選択しているか確認できます。これにより、［フォーム選択］ウィンドウが開きます。
- ［フォーム選択］ウィンドウで、［完了］を選択します。この操作により、［フォームを編集］ウィンドウに戻り、［フィールドを追加］オプションが表示されます。別のフォームコンテナを選択するには、まず［要素を再選択］を選択します。
- ［フォームを編集］ウィンドウで［フィールドを追加］を選択します。これにより選択モードが再び開きます。
- フォーム内の入力フィールドを選択します。［フィールド設定］ウィンドウが開きます。フォームコンテナ内でマウスを動かすと、フォーム要素を囲む赤い点線の枠によって、どのフィールドを選択しているかを確認できます。
注：検証を追加できるのは
<input>フィールドのみです。<textarea>などの他のフォーム要素はサポートされていません。 - ［名前］フィールドに適切な名前を入力します。
- 入力欄に補助テキストを追加してください。これは、訪問者がフォームフィールドを選択したときに表示されるテキストです。例えば、メールアドレス入力欄にフォーム検証機能を追加する場合、ヘルプテキストには「メールアドレスを入力してください」といった指示や、「jane.doe@example.com」といったヒントテキストが含まれる可能性があります。
- フィールドの検証に使用するルールを選択するには、［+ ルールを追加］を選択します。検証条件は、メールアドレス、電話番号、日付、数値、URL、または文字数です。
- ルールテキストを任意で選択します。訪問者に、満たす必要のある条件と、その条件を満たしているかどうかを知らせるテキストです。推奨テキストをそのまま使用するか、 「カスタムテキスト」を選択して独自のテキストを入力してください（例：「有効なメールアドレスを入力してください」）。
- ［フィールド設定］ウィンドウの右下にある［完了］を選択します。
- 必要に応じて、フォーム検証を追加する各フィールドについて、手順4～10を繰り返してください。
- ［フォームを編集］ウィンドウの右下にある［完了］を選択します。
- 必要に応じて、フォームの検証をプレビューできます。ページ上部のアクションバーで［プレビュー］を選択し、プレビューの表示場所（［新しいタブ］、［同じタブ］、または［新しいウィンドウ］）を選択して、［プレビューを起動］を選択します。テストが完了したら、アクションバーの右上にある［プレビューを終了］を選択します。
フォーム検証ガイドを保存してビジュアルデザインスタジオを閉じるには、ページの右上にある［保存］を選択し、続けて［終了］を選択します。
フォームの検証ガイドを一覧表示する
Pendoの［フォーム検証］ページには、既存のフォーム検証ガイドが一覧表示されています。フォーム検証ガイドの一覧を確認するには、［ガイド］>［フォーム検証］に移動します。この画面では、以下の操作を行うことができます。
- ページ上部のドロップダウンフィルターを使用して、アプリケーションとステータスで既存のフォームの検証ガイドを絞り込むことができます。
- フィルターセクションの右上にある［検索］バーを使用して、特定のフォーム検証ガイドを検索します。
- 表の中からフォームの検証ガイドの名前を選択して、フォームの検証ガイドを開きます。
- テーブルのフォーム名、アプリ、ステータス、セグメント、またはページの列でフォーム検証ガイドを並べ替えます。
- 表のステータス列にあるドロップダウンメニューを使用して、各フォーム検証ガイドのステータスを変更します。
フォームの検証フィールドを確認する
フォーム検証ガイドを作成すると、そのガイドに含まれるフィールドの一覧を確認できます。［ガイド］>［フォーム検証］の一覧から、フォーム検証ガイドを見つけて開きます。ここから、フィールド テーブルに、検証が設定されているすべてのフィールドが一覧表示されます。以下が含まれます。
- フィールド名。
- フィールドのCSSセレクタ 。
- フィールドに追加されたヘルパーテキスト。
- フィールドの検証に使用されるルール。
フォームの検証のプレビューと公開
ビジュアルデザインスタジオからフォームの検証をプレビューできます。
- ［ガイド］>［フォームの検証］のリストからフォームの検証ガイドを見つけて開きます。
- ［自分のアプリで編集］を選択します。
- アプリケーションまたはフォームの場所のURLを入力し、［デザイナーを起動］を選択します。これにより、アプリケーション上にビジュアルデザインスタジオが起動します。
- ページ上部のアクションバーで［プレビュー］を選択し、プレビューの表示先を 新しいタブ、同じタブ、または新しいウィンドウからを選択します。
- ［プレビューを起動］を選択します。
- 完了したら、ページの右上にある ［保存］ を選択し、次に ［終了］ を選択します。