Validate Form Fields in PDF Viewer

[Jasmine]

Hi 

I am using EJ1 Web Forms latest version of PDF Viewer in my application.I am creating a PDF Form with help of syncfusion pdf dll and then loading this form pdf in pdf viewer.

My requirement is after the client fills the PDF form and downloads it from PDF Viewer,before downloading I want to validate that all the fields have been filled or not.

Please advise.

Thanks

[Vasugi Sivajothi]

Hi Jasmine, 

 

In EJ1 control, we need to enable the property enableRequiredFormFieldValidation to true to validate the form fields in the PDF Viewer. And we can ensure the value of form fields using the validateRequiredFormField event. Please refer to the below code snippet,  

  

Code Snippet:  

  

  

    $("#viewer").ejPdfViewer({ enableRequiredFormFieldValidation:true, validateRequiredFormField:"validateRequiredFormField" }); 

 

      function validateRequiredFormField(args) { 

            console.log(args);             

       } 

  

  

  

Kindly try this and let us know if you have any concerns.  

 

Regards, 

Vasugi. 

[Jasmine]

Hi

The answer you shared is the exact requirement of mine but I am using Asp.net Web Forms PDF viewer and I tried implementing your answer but it’s not working.

Can you please share a sample?

[Vasugi Sivajothi]

Hi Jasmine, 

 

We have shared the sample for your reference which can be downloaded from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewerWeb1839714913 

 

Please let us know if you have any concerns about this. 

 

Regards, 

Vasugi. 

[Jasmine]

Hi

Thanks for the sample.Just two more queries-:

1.Is there a way where I can get the name or reference of nonFillableFields ,i.e the fields which are not filled in the below function.

function validateRequiredFormField(args) {

console.log(args);

}

2.Can we call this function from a custom button on pdf viewer toolbar?As given like this-:

 var toolbar = pdfviewerElement.firstElementChild.firstElementChild;

            var role = $(toolbar).attr("role");

            if (role == "toolbar") {

                $(toolbar).append($('<div class="tooltip" style="float: right;"><img runat="server" id="MailBtn1" onclick="SaveNdDownload();" style="margin-top: 13px;margin-right: 10px;float:right" src="../Images/SaveContract.png"/><span class="tooltiptext">Save</span></div>'));

            }

[Vasugi Sivajothi]

Hi Jasmine,  

 

Please find the details. 

 

Query	Details
1.Is there a way where I can get the name or reference of nonFillableFields ,i.e the fields which are not filled in the below function.    function validateRequiredFormField(args) {  console.log(args);  }	You can get the non-fillable field details using the responseData. Please refer to the below code snippet.     Code Snippet:      function validateRequiredFormField(evt) {                console.log(evt.responseData);            }
2.Can we call this function from a custom button on pdf viewer toolbar? As given like this-:     var toolbar = pdfviewerElement.firstElementChild.firstElementChild;              var role = $(toolbar).attr("role");              if (role == "toolbar") {                  $(toolbar).append($('<div class="tooltip" style="float: right;"><img runat="server" id="MailBtn1" onclick="SaveNdDownload();" style="margin-top: 13px;margin-right: 10px;float:right" src="../Images/SaveContract.png"/><span class="tooltiptext">Save</span></div>'));              }	Yes. You can add the custom button in the PDF Viewer toolbar and call the function from the custom button using this code snippet. Please refer to the below link.    KB: https://www.syncfusion.com/kb/8702/how-to-add-custom-button-in-pdf-viewer-default-toolbar

 

Please let us know if you have any concerns about this. 

 

Regards, 

Vasugi. 

[Jasmine]

Hi,

There seems to be some issue. The sample you shared had a form pdf in Data folder with which validation code is working fine.

But when I am creating a new PDF form by following your documentation link as below and then loading that newly created PDF form in PDF Viewer then the validation code is not working.

Creating new PDF form using this link - https://help.syncfusion.com/file-formats/pdf/working-with-forms?_ga=2.220058333.571650149.1640333881-465845218.1639661839

The below function is not hitting and performing its task as it should when I created a new PDF form using the above documentation link.

function validateRequiredFormField(evt) {

console.log(evt.responseData);

}

NOTE: I am not using your ej2 PDF Viewer Form Designer for creating PDF form. I am using the above link.

Please advise.

It's urgent so please reply to the earliest.

Thankyou

[Vasugi Sivajothi]

Hi Jasmine, 

 

EJ1 PDF Viewer control will only validate the form fields which is in required state. If the form field is not in required state, then validateRequiredFormField will not be triggerd. However, we will not have a plan to implement this support, we will fix only the bugs in our EJ1 control. So, we suggest you use our EJ2 PDF Viewer control to validate the form fields without required state. We have shared the UG documentation links for your reference. And online web service is only for demo purposes. If you want to upgrade EJ2 control, you need both client and server project. EJ2 PDF Viewer control is both client (Angular, React, Vue, Typescript, Javascript) and server-side (Asp.Net Core, Asp.Net MVC) oriented.  

Javascript:  

https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/ 

 

Web service: 

Core: 

 

https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core 

 

https://www.syncfusion.com/kb/11063/how-to-create-the-pdf-viewer-web-service-application-in-net-core-3-0-and-above-version 

 

MVC: https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service/  

 

 

Demo: https://ej2.syncfusion.com/demos/#/material/pdfviewer/default.html 

 

However, you can enable the required state to form field while creation using the PDF library. You can validate the form fields in the EJ1 PDF Viewer control by setting field as required while creation. Please refer to the below code snippet. 

Code Snippet: 

 

            PdfDocument document = new PdfDocument(); 

 

            //Add a new page to the PDF document. 

 

            PdfPage page = document.Pages.Add(); 

 

            //Create a textbox field and add the properties. 

 

            PdfTextBoxField textBoxField = new PdfTextBoxField(page, "FirstName"); 

 

            textBoxField.Bounds = new RectangleF(0, 0, 100, 20); 

            textBoxField.Required = true; 

 

            textBoxField.ToolTip = "First Name"; 

 

            //Add the form field to the document. 

 

            document.Form.Fields.Add(textBoxField); 

            document.Save("../../Save.pdf"); 

 

 

 

 

Documentation: https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Interactive.PdfField.html#Syncfusion_Pdf_Interactive_PdfField_Required 

 

Please let us know if you have any concerns about this. 

 

Regards, 

Vasugi.