JS データ検証ヒントを非表示にする

1.1 Problem description

When data verification is performed on the form, a verification error prompt box will pop up, as shown in the following figure:

However, sometimes users only want to know the location of the error and do not need the prompt box, because too much prompt information will obscure the main body of the form. Results as shown below:

1.2 Solutions

Do not use the built-in data validation button and submit button, and instead, customize a submit button and add JavaScript events. When submitting, if the verification fails, the cell with error is marked, and data are not allowed to be entered to the database; if the verification is successful, data can be submitted to the database.

2.1 Prepare template

Open %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Basic Data Entry.cpt

2.2 Custom submit button

1) In the designer menu bar, click Template > Web Attributes and select the Data Entry Settings in the opened interface. Check Individually set for the template and double-click the custom button to add it to the top toolbar. As shown below:

2) Double-click the custom button to edit it. Change Widget Alias to Submit (without prompt) and click the User Defined Event button. As shown below:

3) Add JavaScript code to the event editing interface, as shown below:

The JavaScript code is as follows:

contentPane.verifyAndWriteReport();//Perform data verification and submit data
$('.verify-error-container').hide();//Hide prompt box

Note: If the template is embedded in an iframe, the button outside the report needs to implement this function. The JavaScript code is as follows:

contentPane.verifyAndWriteReport();//Perform data verification and submit data
$("#id").contents().find(".verify-error-container").hide();//id is the id value of the corresponding iframe

2.3 Preview effect

Save the report and click Data Entry Preview. Click the custom submit button, and the effect is shown in the following figure:

Note: Mobile terminal is not supported.

No Prompt.cpt