AEM 6.1タッチUIダイアログ - ダイアログ検証イベントを手動で呼び出す

Question

私は、ダイアログ提出イベントのコールバックを持っています。コールバック後にダイアログが送信されることを保証する方法を見つけたいと思います（コールバック後、 。ダイアログ上にウィジェットがどれだけ存在するかわからない場合は、ダイアログ全体（すべてのウィジェット）を手動で事前に検証できますか？おそらく、このバリデーションを呼び出すための何かがありますか？ AEMは、jQueryプラグインを通じて使用可能ないくつかのメソッドをした

Answer 1

：あなたの特定の要件については

$input.willValidate() 
$input.checkValidity() 
$input.validationMessage() 
$input.setCustomValidity(errorMessage) 
$input.updateErrorUI() 

を、あなたはそれらを介して、フォーム、ループ内のすべてのフィールドを取得し、その有効性を確認することができます。すべてのフォームフィールドを見つけるにはjQueryセレクタを使います。フィールドエレメントにカスタムCSSクラス名がある場合や、フォームにカスタムClass名がある場合などがあります。

function validateForm() { 
    var valid = true; 

    /* Select the form fields, will be project specific. */ 
    var $formFields = $('.dialog-selector .coral-Form-field'); 

    $formFields.each(function(){ 
     if (!$(this).checkValidity()) { 
      valid = false; 

      /* Break out of each loop */ 
      return false; 
     } 
    }); 

    return valid; 
} 

例についてはGitHubの上AEM Touch UI Validationと、このAEM Touch UI Validation Libraryについてこのブログ記事を参照してください。 リンク：

Answer 2

このアドビHelpxの記事を見てください - https://helpx.adobe.com/experience-manager/using/creating-touchui-validate.html //検証のAdobe経験マネージャータッチUIダイアログ値

ステップ1：アプリケーション/下コンポーネント/

ステップを作成します。2 ：タッチUIダイアログと必要なすべての項目用のcq：ダイアログを作成します。

手順3：コンポーネントフォルダの下にclientlibを作成します。 'cq.authoring.dialog'をカテゴリとして追加します。これにより、Granite UIで使用可能なすべての機能を使用することができます。

手順4：JQuery（例：validation.js）を使用して検証ロジックを持つスクリプトを追加します。

js.txtファイルにJSあなたはそれを追加していることを確認してくださいコード： -

(function (document, $, ns) { 
    "use strict"; 

    $(document).on("click", ".cq-dialog-submit", function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 

     var $form = $(this).closest("form.foundation-form"), 
      emailid = $form.find("[name='./email']").val(), 
       message, clazz = "coral-Button ", 
     patterns = { 
      emailadd: /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i 
     }; 

     if(emailid != "" && !patterns.emailadd.test(emailid) && (emailid != null)) { 
       ns.ui.helpers.prompt({ 
       title: Granite.I18n.get("Invalid Input"), 
       message: "Please Enter a valid Email Address", 
       actions: [{ 
        id: "CANCEL", 
        text: "CANCEL", 
        className: "coral-Button" 
       }], 
      callback: function (actionId) { 
       if (actionId === "CANCEL") { 
       } 
      } 
     }); 

     }else{ 
       $form.submit(); 
     } 
    }); 
})(document, Granite.$, Granite.author); 

記事全文をお読みください、それはニードフルを達成するための段階的なアプローチを教えてくれます。

いくつかの参考アドビコミュニティ投稿があります： - リンク： - http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manager.topic.html/forum__wfdy-i_have_gonethroughh.html

リンク： - http://adobeaemclub.com/aem-touch-ui-dialog-validation/

グレートリンク： - http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation

私は、これはあなたを助けることを願っています。

おかげで、よろしく

Kautukサーニ