Show Menu
トピック×

アダプティブフォームの標準検証エラーメッセージ

アダプティブフォームは、事前設定された検証条件に基づいて、フィールドに入力した入力を検証します。 検証条件は、アダプティブフォーム内のフィールドに対して許容される入力値を参照します。 検証条件は、アダプティブフォームで使用するデータソースに基づいて設定できます。 例えば、RESTful webサービスをデータソースとして使用する場合、Swagger定義ファイルで検証条件を定義できます。
入力値が検証条件を満たす場合、値はデータソースに送信されます。 そうでない場合は、アダプティブフォームにエラーメッセージが表示されます。
このアプローチと同様に、アダプティブフォームはカスタムサービスと統合して、データ検証を実行できるようになりました。 入力値が検証条件を満たさず、サーバーが返す検証エラーメッセージが標準メッセージ形式の場合、エラーメッセージはフォームのフィールドレベルで表示されます。
入力値が検証条件を満たさず、サーバー検証エラーメッセージが標準メッセージ形式でない場合、アダプティブフォームは検証エラーメッセージを標準形式に変換し、フォームのフィールドレベルで表示するメカニズムを提供します。 次の2つの方法のいずれかを使用して、エラーメッセージを標準形式に変換できます。
  • アダプティブフォーム送信時のカスタムエラーハンドラの追加
  • ルールエディターを使用して、「サービスを呼び出し」アクションにカスタムハンドラーを追加します
この記事では、検証エラーメッセージの標準形式と、エラーメッセージをカスタム形式から標準形式に変換する手順について説明します。

標準検証エラーメッセージの形式

サーバー検証エラーメッセージが次の標準形式の場合、アダプティブフォームはフィールドレベルでエラーを表示します。
   {
    errorCausedBy : "SERVER_SIDE_VALIDATION/SERVICE_INVOCATION_FAILURE"
    errors : [
        {
             somExpression  : <somexpr>
             errorMessage / errorMessages : <validationMsg> / [<validationMsg>, <validationMsg>]

        }
    ]
    originCode : <target error Code>
    originMessage : <unstructured error message returned by service>
}

ここで、
  • errorCausedBy 失敗の理由を説明する
  • errors 検証エラーメッセージと共に、検証条件に合わなかったフィールドのSOM式に言及する
  • originCode 外部サービスから返されたエラーコードが含まれます。
  • originMessage 外部サービスから返された生のエラーデータが含まれます。

カスタムハンドラーを追加するアダプティブフォーム送信の設定

サーバー検証エラーメッセージが標準形式で表示されない場合は、非同期送信を有効にし、アダプティブフォーム送信にカスタムエラーハンドラーを追加して、メッセージを標準形式に変換できます。

非同期アダプティブフォーム送信の設定

カスタムハンドラーを追加する前に、アダプティブフォームの非同期送信を設定する必要があります。 次の手順を実行します。
  1. In adaptive form authoring mode, select the Form Container object and tap to open its properties.
  2. In the Submission properties section, enable Use asynchronous submission .
  3. 送信前 にサーバー上の入力フィールドの値を検証する場合は 、「サーバーで再検証」を選択します。
  4. 送信アクションを選択します。
    • RESTful webサー ビスベースのフォームデータモデルをデータソースとして使用する場合は、「 Submit using Form Data Model フォームデータモデルの操作 」を選択し、適切なデータモデルを選択します。
    • RESTful webサービ スをデータソースとして使用する場合は 、「RESTエンドポイントに送信」を選択し、リダイレクトURL /パスを指定します。
  5. 」をタップして、プロパティを保存します。

アダプティブフォーム送信時のカスタムエラーハンドラの追加

AEM Forms には、フォーム送信が成功した場合と失敗した場合の処理を実行するハンドラーが用意されています。これらのハンドラーは、すぐに使用することができます。これらのハンドラーは、サーバーからの応答に従って実行されるクライアント側の関数です。フォームを送信すると、データが検証用としてサーバーに転送され、フォーム送信の成功イベントとエラーイベントに関する情報とともに、サーバーからクライアントに応答が返されます。この情報は、パラメーターとして関連するハンドラーに渡され、対応する関数が実行されます。
次の手順を実行して、アダプティブフォームの送信時にカスタムエラーハンドラーを追加します。
  1. Open the adaptive form in authoring mode, select any form object, and tap to open the rule editor.
  2. フォームオブジェクトツリーで「​ フォーム ​」選択し、「​ 作成 ​」をタップします。
  3. 「イベ ント」ドロップダウンリストから 、「送信でエラー」を選択します。
  4. カスタムエラー構造を標準エラー構造に変換するルールを作成し、「完了」を タップして 、ルールを保存します。
次に、カスタムエラー構造を標準エラー構造に変換するサンプルコードを示します。
var data = $event.data;
var som_map = {
    "id": "guide[0].guide1[0].guideRootPanel[0].Pet[0].id_1[0]",
    "name": "guide[0].guide1[0].guideRootPanel[0].Pet[0].name_2[0]",
    "status": "guide[0].guide1[0].guideRootPanel[0].Pet[0].status[0]"
};

var errorJson = {};
errorJson.errors = [];

if (data) {
    if (data.originMessage) {
        var errorData;
        try {
            errorData = JSON.parse(data.originMessage);
        } catch (err) {
            // not in json format
        }

        if (errorData) {
            Object.keys(errorData).forEach(function(key) {
                var som_key = som_map[key];
                if (som_key) {
                    var error = {};
                    error.somExpression = som_key;
                    error.errorMessage = errorData[key];
                    errorJson.errors.push(error);
                }
            });
        }
        window.guideBridge.handleServerValidationError(errorJson);
    } else {
        window.guideBridge.handleServerValidationError(data);
    }
}

に、標 var som_map 準形式に変換するアダプティブフォームフィールドのSOM式を示します。 アダプティブフォーム内の任意のフィールドのSOM式を表示するには、フィールドをタップし、「 SOM式を表示」を選択します ​。
アダプティブフォームは、このカスタムエラーハンドラーを使用して、に示すフィールドを標準エラーメ var som_map ッセージ形式に変換します。 その結果、検証エラーメッセージはアダプティブフォームのフィールドレベルで表示されます。

「サービスを呼び出し」アクションを使用したカスタムハンドラーの追加

次の手順を実行して、ルールエディターの アダプティブフォームのルールエディタ- Invoke Serviceアクションを使用して、カスタムエラー構造を標準エラー構造に変換するエラーハンドラーを追加します。
  1. Open the adaptive form in authoring mode, select any form object, and tap to open the rule editor.
  2. 「​ 作成 ​」をタップします。
  3. ルールの「 When 」セクションに条件を作成します。 例えば、フィー # 、変更されます。 「選択 」は 、「状態 を選択 」ドロップダウンリストから変更され、この条件を満たします。
  4. In the Then section, select Invoke Service from the Select Action drop-down list.
  5. Input 」セクションからPostサービスと対応するデータ連結を選択します。 例えば、アダプティブフォームの Name ID Status の各フィールドを検証する場合は、Postサービス(pet)を選択し、InputInputセクションでpet name、pet.id、pet.statusを選択します。
このルールの結果、手順2で定義したフィールドが変更され、 Name ID Status の各フィールドに入力した値が検証されると、フォーム内のフィールドからTabキーで移動します。
  1. Select Code Editor from the mode selection drop-down list.
  2. 「コード の編集」をタップしま ​す。
  3. 既存のコードから次の行を削除します。
    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs);
    
    
  4. カスタムエラー構造を標準エラー構造に変換するルールを作成し、「完了」を タップして 、ルールを保存します。 例えば、カスタムエラー構造を標準エラー構造に変換するには、次のサンプルコードを末尾に追加します。
    var errorHandler = function(jqXHR, data) {
    var som_map = {
        "id": "guide[0].guide1[0].guideRootPanel[0].Pet[0].id_1[0]",
        "name": "guide[0].guide1[0].guideRootPanel[0].Pet[0].name_2[0]",
        "status": "guide[0].guide1[0].guideRootPanel[0].Pet[0].status[0]"
    };
    
    
    var errorJson = {};
    errorJson.errors = [];
    
    if (data) {
        if (data.originMessage) {
            var errorData;
            try {
                errorData = JSON.parse(data.originMessage);
            } catch (err) {
                // not in json format
            }
    
            if (errorData) {
                Object.keys(errorData).forEach(function(key) {
                    var som_key = som_map[key];
                    if (som_key) {
                        var error = {};
                        error.somExpression = som_key;
                        error.errorMessage = errorData[key];
                        errorJson.errors.push(error);
                    }
                });
            }
            window.guideBridge.handleServerValidationError(errorJson);
        } else {
            window.guideBridge.handleServerValidationError(data);
        }
      }
    };
    
    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, null, errorHandler);
    
    
    に、標 var som_map 準形式に変換するアダプティブフォームフィールドのSOM式を示します。 アダプティブフォーム内の任意のフィールドのSOM式を表示するには、フィールドをタップし、その他のオプション (...)メニューから「 SOM式を表示 」を選択します。
    必ず、サンプルコードの次の行をカスタムエラーハンドラーにコピーしてください。
    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, null, errorHandler);
    
    
    executeOperation APIには、新しいカスタムエラ null ーハン errorHandler ドラーに基づくパラメーターとパラメーターが含まれます。
    アダプティブフォームは、このカスタムエラーハンドラーを使用して、に示すフィールドを標準エラーメ var som_map ッセージ形式に変換します。 その結果、検証エラーメッセージはアダプティブフォームのフィールドレベルで表示されます。