PDFViewer Form Validation

[Emma Billington]

I have a PDFViewer with different buttons to select different PDFs

     <a class="btn btn-sm btn-primary" id="btn1">1</a>
     <a class="btn btn-sm btn-primary" id="btn2">2</a>
     <a class="btn btn-sm btn-primary" id="btn3">3</a>

     <div id="pdfviewer" class="mt-3"></div>
 Copy

then i have this javascript to render the PdfViewer and do some required validation.

    var pdfViewer = new ej.pdfviewer.PdfViewer({
        documentPath: '@Url.Content(Model.DocumentPath)', // Ensure this path is correct
        height: '100%',
        enableFormFields: true,
        toolbarSettings: {
            showToolbar: true,
            toolbarItems: ['PageNavigationTool', 'MagnificationTool', 'SelectionTool', 'PanTool', 'UndoRedoTool', 'PrintOption', 'DownloadOption',
                {
                    id: 'submit',
                    text: 'Submit Form',
                    align: 'Right',
                    tooltipText: 'Submit Form'
                }]
        }
    });
    pdfViewer.appendTo('#pdfviewer');
    pdfViewer.toolbarClick = function (args) {
        if (args.item.id === 'submit') {
            validateFormFields();
        };
    };

    function validateFormFields() {
        let emptyFields = [];
        // Loop through all form fields and check if they are empty
        pdfViewer.formFields.forEach(function (field) {
            console.log(field);
            if (field.isRequired == true && (field.value === "" || field.value === null)) {
                emptyFields.push(field.name);
            }
            else if (field.formFieldAnnotationType === 'CheckBox' && field.isChecked !== true)       
            {
                emptyFields.push(field.name);
            }
        });

        // Display an alert with the empty fields, or submit if all fields are filled
        if (emptyFields.length > 0) {
            alert('The following fields are empty or not checked: ' + emptyFields.join(', '));
        } else {
            pdfViewer.saveAsBlob().then(function (pdfBlob) {
                console.log('Exported PDF Blob:', pdfBlob);
                submitPDFToServer(pdfBlob);
            }).catch(function (error) {
                console.error('Error exporting PDF:', error);
            });
        }
    }

    $('#btn1').on('click', function () {
        pdfGet("1");
    });

    $('#btn2').on('click', function () {
        pdfGet("2");
    });

    $('#btn3').on('click', function () {
        pdfGet("3");
    });

    //this will get the pdf selected
    function pdfGet(pdf) {
        $.ajax({
            url: '/Home/pdfGet',
            type: 'POST',
            data: { 'pdf': pdf },
            success: function (data) {
                pdfViewer.load(data, null);
            },
            error: function (jqXHR, textStatus) {
                alert('Error Occured'); //MESSAGE
            }
        });
    };
});
 Copy

The issue i have is, when i click on the buttons to show other pdfs, the ones ive selected now kicks off the required validation, so it wont let me submit the pdf even if all fields on that PDF is filled in. Is there a way to clear the fields of previous opened pdfs, before showing the selected pdf?

I would also like to know if there is a way to do validation on the textbox, so email address formatting, numbers only, date formats, etc

[Umamageshwari Shanmugam]

Hi Emma Billington,

We have provided a sample to load different documents when clicking the document link, and there are no issues with submitting the form. Additionally, the code to validate the name, email, and date of birth has been included. If the issue persists, please provide more details, such as a video or a modified version of the sample that replicates the issue. This will allow us to thoroughly analyze the problem and offer the appropriate support.

Sample link - CoreSample

Regards,

Umamageshwari Shanmugam