AEM as a Cloud Service:ダイアログ送信は、カスタムスクリプトを使用して必須フィールドの検証を回避します

この記事では、通常、カスタムクライアントサイドスクリプトが標準検証を上書きするため、必須フィールドに入力されていなくてもコンポーネントダイアログを送信できるAdobe Experience Manager as a Cloud Serviceの問題に対処する方法について説明します。

説明 description

環境

Adobe Experience Manager as a Cloud Service(AEMaaCS)およびAEM SDK環境。

症状

  • コンポーネントダイアログには、カスタム検証を含むテキストフィールドと、必須​とマークされたパスフィールドが含まれています。
  • AEM SDK環境では、必須フィールドが空の場合や検証に失敗した場合、ダイアログを送信できません。
  • AEM as a Cloud Service環境では、必須フィールドが入力されていない場合や検証が失敗した場合でも、ダイアログで送信できます。
  • カスタムバリデーターにエラーメッセージが表示されますが、完了 ボタンをクリックしてもフォームが送信されます。

フィールド設定の例:

<alt
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    validation="testing.test"
    fieldDescription="Alternative text for image"
    fieldLabel="Alt text"
    name="./alt"/>
<linkURL
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
    required="{Boolean}true"
    fieldDescription="Link"
    fieldLabel="Link"
    name="./linkURL"/>

原因

カスタムクライアントサイド検証スクリプトは、 ダイアログ送信 ボタンのグローバルクリックハンドラーを登録します。 このハンドラーは、すべてのダイアログ送信をインターセプトし、標準のGranite UI検証をバイパスしてフォームを直接送信します。 その結果、必須フィールドが空の場合やカスタム検証が失敗した場合でも、ダイアログが送信されます。

解決策 resolution

問題を解決するには、次の手順に従います。

  1. カスタムのクライアントサイド検証スクリプト、特にダイアログ送信にイベントハンドラーを登録するスクリプト( ダイアログ送信 ボタンのハンドラーなど)を確認します。
  2. カスタムハンドラーが、意図するダイアログまたはフィールドの送信のみを傍受することを確認します(例:アクションを実行する前に、特定のマルチフィールドまたはダイアログコンテキストを確認します)。
  3. ハンドラーが目的のダイアログを処理していることを確認した後にのみe.stopPropagation()とe.preventDefault()が呼び出されるように、ハンドラーをリファクタリングします。 その他のダイアログでは、AEMの標準検証と送信フローを妨害なく続行できます。
  4. 目的のダイアログ以外のダイアログ用にフォームを直接送信するフォールバックロジックを削除します。
  5. アプリケーションを再デプロイします。
  6. 必須フィールドが入力されていないか、検証に失敗した場合に、ダイアログの送信が正しくブロックされていることを確認します。
recommendation-more-help
experience-cloud-kcs-help-kbarticles