Question

我在对话框提交的事件上有一些回调，我想找到方法来保证在我的回调之后提交对话框（我的回调后的验证可以禁止我）。如果我不知道对话框中存在多少小部件，我是否可以手动预先验证整个对话框（每个小部件）。也许有什么东西可以调用这个验证？

Answer 1

AEM通过jQuery插件为您提供了一些方法：

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

根据您的特殊要求，您可以获取表单中的所有字段，循环访问它们并检查其有效性。使用jQuery选择器查找所有表单字段;您可能在字段元素上有自定义CSS类名称，或者您可能在表单上有自定义类名称。

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

请查看此Adobe Helpx文章：链接： - https://helpx.adobe.com/experience-manager/using/creating-touchui-validate.html //验证Adobe Experience Manager触摸UI对话框值

第1步：在/ apps /

下创建一个组件

步骤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);

请阅读全文，它将告诉您逐步实现需要的方法。

一些参考Adobe社区帖子是： - 链接： - 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 Sahni

AEM 6.1触摸UI对话框 - 手动调用对话框验证事件

2 个答案: