您将如何为表单字段实施 Adobe CQ 客户端验证？答案

【问题标题】：How would you implement Adobe CQ client side validation for form fields?您将如何为表单字段实施 Adobe CQ 客户端验证？
【发布时间】：2015-07-18 02:40:29
【问题描述】：

我已经为表单字段实现了自定义服务器端验证，因此当用户指定约束时，该字段将在表单提交时进行验证。如果可能的话，我也希望在约束级别进行客户端验证，以便在字段上配置的所有内容都是约束。示例：如果字段无效，则在模糊事件的字段下方显示错误。我知道我也可以提供脚本 clientvalidation.jsp，但我不明白这是如何工作的，因为添加脚本似乎没有效果。

【问题讨论】：

您询问的是 CQ5 作者对话框中的表单字段，还是最终用户看到的呈现页面上的表单字段？
@Shawn 和渲染页面的表单域有关

标签： javascript jquery adobe aem

【解决方案1】：

由于您正在处理呈现的页面，我建议您使用标准验证库添加客户端验证，例如 jQuery 验证插件：

jQuery Validation Plugin

它做你正在寻找的东西，比如这种事情：

我在 CQ 页面中使用过这个。查看该页面上的视频——它提供了一个很好的演示，说明了如何做你正在寻找的东西。并查看演示页面：

Demos

这不是唯一的验证选项，因此您还可以考虑其他选项。我认为关键是将这个问题作为典型的 HTML/JavaScript 需求而不是 CQ 需求来解决。

另见Best JavaScript solution for client-side form validation and interaction?

【讨论】：

是的，这就是我最终可能会做的事情。我会看看我是使用这个插件还是另一个插件。我想知道 cq 是否支持这一点，因此是这个问题。

【解决方案2】：

您需要创建一个clientlib，其中包含查找适当表单元素、将侦听器附加到适当元素事件、在侦听器中执行实际输入验证并最终在页面上显示适当消息的 JavaScript 代码。

【讨论】：