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

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;
}

有关更多示例，请参阅这篇关于AEM Touch UI验证的博客文章和GitHub上的AEM Touch用户界面验证库。

Answer 2

请看一下这篇Adobe Helpx文章：链接：-https://helpx.adobe.com/experience-manager/using/creating-touchui-validate.html//验证Adobe Experience Manager Touch UI对话框值

步骤1：在/apps/下创建一个组件

步骤2：创建cq:对话框，用于触摸UI对话框和所有所需项目。

步骤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-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+(.[a-zd!#$%&'*+-/=?^_`{|}~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]+)*|"((([ t]*rn)?[ t]+)?([x01-x08x0bx0cx0e-x1fx7fx21x23-x5bx5d-x7eu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|\[x01-x09x0bx0cx0d-x7fu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]))*(([ t]*rn)?[ t]+)?")@(([a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zdu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]).)+([a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]|[a-zu00A0-uD7FFuF900-uFDCFuFDF0-uFFEF][a-zd-._~u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF]*[a-zu00A0-uD7FFuF900-uFDCFuFDF0-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