JS去掉填报校验出错提示框

1. 概述
1.1 问题描述

前端填报预览数据校验时，如果填报值不满足校验规则，会自动弹出校验出错提示框，如下图所示：

但有时用户只希望校验出错只显示定位标记即可，不需要弹出提示框（特别是提示信息过多，会遮挡住报表主体），效果如下图所示：

1.2 解决思路

不使用内置的数据校验和提交按钮，自定义一个提交按钮，添加 JavaScript 事件。提交时校验不通过显示报错定位标记，数据不予入库；校验通过数据直接入库。

2. 示例
2.1 准备模板

打开设计器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\VerifyForm\内置校验.cpt

模板制作步骤参见文档：内置校验

2.2 自定义提交按钮

1）设计器菜单栏点击模板>模板Web属性，打开的界面选择填报页面设置>为该模板单独设置，双击自定义按钮添加到顶部工具栏，点击顶部工具栏编辑按钮。如下图所示：

2）打开的工具栏编辑界面选中自定义按钮，将控件名称修改为提交(去提示框)，点击自定义事件按钮。如下图所示：

3）事件编辑界面添加 JavaScript 代码，如下图所示：

JavaScript 代码如下：

1. contentPane.verifyAndWriteReport();//实现数据校验且提交入库
   
2. $('.verify-error-container').hide();//实现隐藏数据校验提示框
   
3. 注：如果模板是嵌入到 iframe 中，报表外按钮需要实现该功能，JavaScript 代码如下：
   
4. 
   
5. contentPane.verifyAndWriteReport();//实现数据校验且提交入库
   
6. $("#id").contents().find(".verify-error-container").hide();//id为对应iframe的id值

复制代码

2.3 预览效果

保存报表，点击填报预览，点击自定义的提交按钮，效果如下图所示：

注：不支持移动端。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\09-JS去掉填报校验出错提示框.cpt

点击下载模板：09-JS去掉填报校验出错提示框.cpt

这样的话有时候会看不到，可不可以设计成数据校验的时候提示字符出现在校验位置旁边