通常,Web表单配置为同步提交。 当用户提交表单时,会将其重定向到确认页面,或在提交失败时,将重定向到错误页面。 然而,诸如单页应用程序等现代Web体验正在日益流行,其中网页保持静态,而客户端与服务器交互在后台进行。 您现在可以通过配置异步提交来提供此自适应表单体验。 在这种情况下,自适应表单的行为与单页应用程序类似,因为在服务器上验证提交的表单数据时表单不会重新加载或其URL不会更改。
阅读有关自适应表单异步提交的详细信息。
为自适应表单配置异步提交:
在自适应表单创作模式中,选择表单容器对象,然后点按以打开其属性。
在提交属性部分,启用使用异步提交。
在在提交部分,选择以下选项之一,在成功提交表单时执行。
点按以保存属性。
AEM Forms为表单提交提供开箱即用的成功和错误处理程序。 处理函数是基于服务器响应执行的客户端函数。 提交表单时,数据会被传输到服务器进行验证,服务器会向客户端返回一个响应,其中包含有关提交成功或错误事件的信息。 信息作为参数传递给相关处理函数以执行该函数。
此外,表单作者和开发人员可以在表单级别编写规则以覆盖默认处理函数。 有关详细信息,请参阅使用规则覆盖默认处理函数。
让我们首先查看服务器响应,了解成功和错误事件。
服务器响应提交成功事件的结构如下:
{
contentType : "<xmlschema or jsonschema>",
data : "<dataXML or dataJson>" ,
thankYouOption : <page/message>,
thankYouContent : "<thank you page url/thank you message>"
}
成功提交表单时的服务器响应包括:
成功处理程序读取服务器响应,并相应地重定向到所配置的页面URL或显示一条消息。
服务器响应的提交错误事件结构如下:
{
errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",
errors : [
{ "somExpression" : "<SOM Expression>",
"errorMessage" : "<Error Message>"
},
...
]
}
提交表单时出错时的服务器响应包括:
错误处理程序读取服务器响应,并相应地在表单上显示错误消息。
表单开发人员和作者可以在表单级别在代码编辑器中编写规则以覆盖默认处理函数。 成功和错误事件的服务器响应以表单级别显示,开发人员可以使用规则中的$event.data
访问该表单。
执行以下步骤以在代码编辑器中编写规则,以处理成功和错误事件。