Send Email Inputs Cause Form Validation Error

Environment

Product	Progress® Telerik® Reporting
Version	19.2.25.813

Description

When the HTML5 Report Viewer, or one of its wrappers, is rendered inside an HTML form, and a button in that form triggers a form submission, the browser throws a validation error:

An invalid form control with name='from' is not focusable. 
An invalid form control with name='to' is not focusable. 
An invalid form control with name='subject' is not focusable.

This error occurs even though the "Send Email" functionality is disabled in the viewer configuration.

Cause

The HTML5-based report viewers include input fields for the "Send Email" dialog in its HTML output by default, regardless of whether the "Send Email" functionality is enabled or disabled. When these hidden input fields are part of a form submission, the browser's form validation logic identifies them as invalid form controls that cannot receive focus, which causes the validation error.

Solution

A potential solution is to place the viewer outside of the form element if your application structure allows it. However, if this is not feasible, the workaround is to use a custom HTML template that excludes the "Send Email" input elements from the viewer's HTML output. Follow these steps:

1. Locate the default template: Open the Telerik Reporting installation directory -> Html5 -> ReportViewer -> templates. For example, the absolute path may look like this - C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q4\Html5\ReportViewer\templates.
2. Copy the template locally: Copy the content of the default template response and save it as an HTML file in your project (for example, custom-report-viewer-template.html).
3. Remove the Send Email dialog: In your local template file, locate and remove the div element with the trv-send-email-dialog class. This element contains all the problematic input fields related to the "Send Email" functionality.
4. Configure the viewer to use your custom template: Pass the path to your custom template through the TemplateUrl option (or templateUrl in camelCase depending on the viewer) when initializing the viewer.

Examples

• HTML5 ASP.NET WebForms Report Viewer

<telerik:ReportViewer
    ID="reportViewer1"
    ServiceUrl="api/reports"
    Width="1300px"
    Height="900px"
    TemplateUrl="/custom-report-viewer-template.html"
    runat="server">
    <ReportSource IdentifierType="UriReportSource" Identifier="SampleReport.trdp">
    </ReportSource>
</telerik:ReportViewer>

• HTML5 Report Viewer

<div id="reportViewer1"></div>
<script>
    $(document).ready(function() {
        $("#reportViewer1").telerikReportViewer({
            serviceUrl: "/api/reports/",
            reportSource: {
                report: "SampleReport.trdp"
            },
            templateUrl: "/custom-report-viewer-template.html"
        });
    });
</script>

By using a custom template without the "Send Email" input elements, the form validation error will no longer occur, and your form submissions will work as expected.

Be aware that this workaround requires maintaining a custom template. When you upgrade to a newer version of Telerik Reporting, you will need to repeat this process if the template structure changes. The Telerik Reporting team is aware of this issue and has planned to release a permanent fix. You can track the progress on the public feedback item.

See Also

• HTML5 Report Viewer Overview
• Customizing the HTML5 Report Viewer
• HTML5 WebForms Report Viewer