Show the notification dialog in UI When form fields are empty

7 Sep 20231 minute to read

The PDF Viewer server library allows you to show the notification dialog in UI when fields in the form are not filled or empty using the following properties and events below,

• EnableFormFieldsValidation
• ShowNotificationDialog
• validateFormFields

The following steps are used to show the notification dialog in UI.

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: Use the following code snippet to show the notification dialog when form fields are empty.

@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ValidateFormFields("validateFormFields").EnableFormFieldsValidation(true).ShowNotificationDialog(false).Render()

<script>
    function validateFormFields(args) {
        var nonfilledFormFields = args.nonFillableFields;
        var viewer = document.getElementById('pdfviewer').ej2_instances[0];
        var errorMessage = "Kindly fill all the form fieds";
        viewer.showNotificationPopup(errorMessage);
    }
</script>

Find the sample of how to show the notification dialog in UI When form fields are empty