Syncfusion AI Assistant

How can I help you?

Validate PDF Form Fields in Vue PDF Viewer

28 Feb 20265 minutes to read

The Syncfusion Vue PDF Viewer provides built-in support for validating form fields before end users perform actions such as printing, downloading, or submitting a PDF document. Validation ensures that all required form fields are completed before allowing these actions to proceed.

How PDF Form Validation Works

Form field validation follows this flow:

  • Enable validation using the enableFormFieldsValidation property.
  • Handle the validateFormFields event to determine which required fields are not filled.
  • When validation is enabled and an end user attempts to print, download, or submit the document:
  • The validateFormFields event is triggered.
  • Unfilled required fields are listed in args.nonFillableFields.
  • The application can cancel the action, display an error message, or move focus to an invalid field.

Enable PDF Form Field Validation

Enable validation by setting the enableFormFieldsValidation property to true and handling the validateFormFields event.

<template>
  <div id="app">
    <ejs-pdfviewer
      id="pdfViewer"
      ref="pdfviewer"
      :documentPath="documentPath"
      :resourceUrl="resourceUrl"
      style="height: 640px"
      @documentLoad="onDocumentLoad"
    />
  </div>
</template>

<script>
import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  TextSelection,
  TextSearch,
  FormFields,
  FormDesigner,
  PageOrganizer,
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: {
    'ejs-pdfviewer': PdfViewerComponent,
  },
  data() {
    return {
      documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
    };
  },
  provide: {
    PdfViewer: [
      Toolbar,
      Magnification,
      Navigation,
      Annotation,
      TextSelection,
      TextSearch,
      FormFields,
      FormDesigner,
      PageOrganizer,
    ],
  },
  methods: {
    onDocumentLoad() {
      const pdfviewer = this.$refs.pdfviewer.ej2Instances;

      // 1) Default for new Textbox fields
      pdfviewer.textFieldSettings = { isRequired: true };

      // 2) Validation wiring
      pdfviewer.enableFormFieldsValidation = true;
      pdfviewer.validateFormFields = (args) => {
        // Triggers when required fields are empty on submit/validate
        if (args && args.formField && args.formField.length > 0) {
          alert('Please fill all required fields. Missing: ' + args.formField[0].name);
        }
      };

      // 3) Creation (add a Textbox form field)
      pdfviewer.formDesignerModule.addFormField('Textbox', {
        name: 'Email',
        bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
        isRequired: true,
        tooltip: 'Email is required',
      });
    },
  },
};
</script>

Mark Fields as Required

Only fields marked as required participate in validation. Use the isRequired property when creating or updating a form field.

// (inside your `onDocumentLoad` method)
const pdfviewer = this.$refs.pdfviewer.ej2Instances;
pdfviewer.formDesignerModule.addFormField('Textbox', {
  name: 'Email',
  bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
  isRequired: true,
  tooltip: 'Email is required',
});

Handle PDF Form Validation Results

In the validateFormFields event, the application can control the behavior when fields are missing. Typical actions include:

  • Cancel the print or download operation
  • Display an error message to the end user
  • Set focus to the first unfilled required field
// (inside your `onDocumentLoad` or mounted handler)
const pdfviewer = this.$refs.pdfviewer.ej2Instances;
pdfviewer.enableFormFieldsValidation = true;
pdfviewer.validateFormFields = (args) => {
  if (args && args.formField && args.formField.length > 0) {
    // Example: prevent the pending action and notify the end user
    args.cancel = true;
    alert('Please fill all required fields. Missing: ' + args.formField[0].name);
    // Optionally focus or scroll to the field
  }
};

Tips

  • Use isRequired to clearly mark mandatory fields.
  • Validation is triggered only during print, download, or submit actions.
  • For custom validation logic (such as validating an email format):
    • Retrieve all form fields using retrieveFormFields().
    • Apply custom checks before allowing the action to proceed.

See Also