# pdf-viewer-form-filling

> PDF viewer validates required form fields before allowing the document to be submitted.

**Framework:** vue  **Component:** PdfViewer  **Variant:** form-filling

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/pdf-viewer-form-filling.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-form-filling/PdfViewer.vue

```vue
<template>
    <div>
        <div class="control-section">
            
            <ejs-pdfviewer 
                id="pdfviewer" 
                ref="pdfviewer" 
                :documentPath="documentPath" 
                :enableFormFieldsValidation="true"
                :showNotificationDialog="false" 
                :validateFormFields="validateFormFields"
                :resourceUrl="resourceUrl">
            </ejs-pdfviewer>
        </div>

    </div>
</template>
<style scoped>
#pdfviewer {
    height: 640px;
}

</style>
<script>
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer } from "@syncfusion/ej2-vue-pdfviewer";

var viewer;
export default {
    components: {
        'ejs-pdfviewer': PdfViewerComponent
    },
    data: function () {
        return {
            documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
            resourceUrl: 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib'
        }
    },
    provide: {
        PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner,PageOrganizer]
    },
    methods: {
        validateFormFields: function (args) {
            var errorMessage = "Required Field(s): ";
            viewer = this.$refs.pdfviewer.ej2Instances;
            var forms = viewer.formFieldCollections;
            var flag = false;
            var radioGroupName = "";
            for (var i = 0; i < forms.length; i++) {
                var text = "";
                if (forms[i].isRequired == true) {
                    if (forms[i].type.toString() == "Checkbox" && forms[i].isChecked == false) {
                        text = forms[i].name;
                    }
                    else if (forms[i].type == "RadioButton" && flag == false) {
                        radioGroupName = forms[i].name;
                        if (forms[i].isSelected == true)
                            flag = true;
                    }
                    else if (forms[i].type.toString() != "Checkbox" && forms[i].type != "RadioButton" && forms[i].value == "") {
                        text = forms[i].name;
                    }
                    if (text != "") {
                        if (errorMessage == "Required Field(s): ") {
                            errorMessage += text;
                        }
                        else {
                            errorMessage += ", " + text;
                        }
                    }
                }
            }
            if (!flag && radioGroupName != "") {
                if (errorMessage == "Required Field(s): ")
                    errorMessage += radioGroupName;
                else
                    errorMessage += ", " + radioGroupName;
            }
            if (errorMessage != "Required Field(s): ") {
                viewer.showNotificationPopup(errorMessage);
            }
        },
    }
};
</script>
```

### src/components/pdf-viewer-form-filling/PdfViewerView.vue

```vue
<template>
  <PDFViewer />
</template>

<script setup>
import PDFViewer from '../../components/PDFViewer.vue'
</script>
```