HelpBot Assistant

How can I help you?

Form field events in JavaScript PDF Viewer

12 Feb 20265 minutes to read

The Syncfusion JavaScript PDF Viewer exposes form field events that let developers react to user interactions, respond to form changes, and implement custom business logic. Use these events for validation, UI updates, logging, and workflow automation.

Form field events are triggered when a field is added, selected, modified, moved, resized, or removed.

Supported PDF form field events

The following table lists the supported form field events and their descriptions.

Form field events Description
formFieldAdd Triggered when a new form field is added, either through the Form Designer UI or programmatically.
formFieldClick Fired when a form field is clicked in the viewer.
formFieldDoubleClick Fired when a form field is double clicked.
formFieldFocusOut Triggered when a form field loses focus after editing.
formFieldMouseLeave Fired when the mouse pointer leaves a form field.
formFieldMouseOver Fired when the mouse pointer moves over a form field.
formFieldMove Triggered when a form field is moved to a new position.
formFieldPropertiesChange Fired when any form field property changes, such as font, color, or constraint values.
formFieldRemove Triggered when a form field is deleted from the document.
formFieldResize Fired when a form field is resized.
formFieldSelect Fired when a form field is selected in the Form Designer.
formFieldUnselect Fired when a previously selected form field is unselected.
validateFormFields Fired when form field validation fails during print or download actions.

Common use cases

Form field events can be used to:

  • Validate form data before printing or downloading
  • Track user interaction with form fields
  • Update UI elements dynamically
  • Log form changes for auditing
  • Trigger workflow actions based on field changes
  • Enforce business rules during form editing

Handle PDF Form Field Events

You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur.

var pdfviewer = new PdfViewer({
  // Basic examples for common form-field events
  formFieldAdd: function (args) { console.log('formFieldAdd', args); },
  formFieldRemove: function (args) { console.log('formFieldRemove', args); },
  formFieldPropertiesChange: function (args) { console.log('formFieldPropertiesChange', args); },

  // Additional events from the table
  formFieldClick: function (args) { console.log('formFieldClick', args); },
  formFieldDoubleClick: function (args) { console.log('formFieldDoubleClick', args); },
  formFieldFocusOut: function (args) { console.log('formFieldFocusOut', args); },
  formFieldMouseOver: function (args) { console.log('formFieldMouseOver', args); },
  formFieldMouseLeave: function (args) { console.log('formFieldMouseLeave', args); },
  formFieldMove: function (args) { console.log('formFieldMove', args); },
  formFieldResize: function (args) { console.log('formFieldResize', args); },
  formFieldSelect: function (args) { console.log('formFieldSelect', args); },
  formFieldUnselect: function (args) { console.log('formFieldUnselect', args); }
});

// Validation Event
pdfviewer.enableFormFieldsValidation = true;
pdfviewer.validateFormFields = function (args) {
  if (args && args.formField && args.formField.length > 0) {
    // Example: prevent the pending action and notify the user
    args.cancel = true;
    alert('Please fill all required fields. Missing: ' + args.formField[0].name);
    // Optionally focus or scroll to the field
  }
};

Event Behavior Notes

  • Events triggered through the UI and programmatic APIs use the same event handlers.
  • Property related events are raised immediately when changes occur.
  • Validation events are triggered only during print or download operations.

View Sample on GitHub

See also