Returning Error Information After Data Entry Validation by JS

Problem

For data entry reports, you can set validation rules in Built-in Validation. After successful validation, the data can be submitted to the database. If the validation fails, an error prompt window will pop up in the upper left corner (fixed position), as shown in the following figure.

In some cases, you may not want to use the FineReport built-in validation prompt displayed in the upper left corner. Instead, you want to display the error prompt in a pop-up box and determine the next operation based on the error information, as shown in the following figure. How to realize the effect?

Implementation Method

After adding a built-in submission for a template, you can add an After Validation event, which specifies relevant operations about the pop-up window based on the validation result, under Web Attribute > Data Entry Setting > Event Setting.

API Description

The After Validation event will return the parameter fr_verifyinfo specifying the information returned by validation. The information is an object containing two attributes.

fr_verifyinfo.success: true/false is returned. true represents successful validation, while false represents failed validation.

fr_verifyinfo.info: A specific error prompt, which is an array object, is returned. For example, the errors in cell A12 and cell B13 are returned and stored separately as elements of the arrays.

If the validation fails, you can add an After Validation event to return one or multiple pop-up prompt windows, depending on the JS in the After Validation event. The following provides examples of returning one pop-up window and multiple pop-up windows.

Returning One Pop-up Window

1. Prepare a template, design the report style, and add text widgets to cells A3 to F3, respectively, as shown in the following figure.

2. Choose Template > Data Entry Attribute > Validate Data, select Built-in Validation, and add a built-in validation rule, as shown in the following figure.

Validation rule: When the value of cell D3 is less than 0, the error prompt "0" is displayed. When the value of cell D3 is more than 1,000, the error prompt "1" is displayed.

3. Choose Template > Web Attribute > Data Entry Setting on the menu bar, select Set for This Template Separately in Following Settings, and add an After Validation event in Event Setting, as shown in the following figure.

The JavaScript code is as follows.

if (fr_verifyinfo.success) {
       alert("Successfully validated");
       return false;
} else {
       if (fr_verifyinfo.info == "D3:0") {
              alert("The selling cost is less than zero!");
              location.reload();
              return false;
       } else {
              FR.Msg.confirm("Alert", "The selling cost is more than 1000, sure to submit the data?", function(result) {
                     if (result) {
                            _g().writeReport();
                            //Perform a forced submission.
                            location.reload();
                            //Refresh the page.
                     }
              })
              return false;
       }
} 

4. After saving the template, click Data Entry Preview. The following figure shows the effect.

Note: 

The effect cannot be previewed on mobile terminals.

Returning Multiple Pop-up Windows

1. Choose Template > Data Entry Attribute > Validate Data, select Built-in Validation, and add a built-in validation rule, as shown in the following figure.

Validation rule: When the value of cell D3 is less than 0, the error prompt "0" is displayed. When the value of cell D3 is more than 1,000, the error prompt "1" is displayed.

2. Choose Template > Web Attribute > Data Entry Setting on the menu bar, select Set for This Template Separately in Following Settings, and add an After Validation event in Event Setting, as shown in the following figure.

The JavaScript code is as follows.

if (fr_verifyinfo.success) {
       alert("Successfully validated");
       //The original successful validation prompt is no longer triggered.
} else {
       for (var i = 0; i < fr_verifyinfo.info.length; i++) {
              if (fr_verifyinfo.info[i] == "D3:0") {
                     alert("Validation error occurs in cell D3.");
              } else if (fr_verifyinfo.info[i] == "E3:1") {
                     alert("Validation error occurs in cell E3.");
              }
       }
       return false;
       //The original failed validation prompt is no longer triggered.
}

3. After saving the template, click Data Entry Preview. The following figure shows the effect.

Enter values less than zero in columns Selling Cost and Other Expenditure, respectively.

After you click Submit, the prompt window displaying "Validation error occurs in cell E3." pops up.

Note:

The effect cannot be previewed on mobile terminals.

1. Returning One Pop-up Window

For details, you can download the template Returning Error Information After Data Entry Validation by JS - Example One.cpt.

2. Returning Multiple Pop-up Windows

For details, you can download the template Returning Error Information After Data Entry Validation by JS - Example Two.cpt.cpt.