HelpBot Assistant

How can I help you?

Validate PDF Form Fields in React PDF Viewer

25 Feb 20267 minutes to read

The Syncfusion React PDF Viewer provides built-in support for validating form fields before users perform actions such as printing, downloading, or submitting a PDF document. Validation ensures that required form fields are completed before allowing these actions. This improves data completeness and reliability.

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 a user attempts to print, download, or submit the document:
    • The validateFormFields event is triggered.
    • Unfilled required fields are provided in the event arguments (typically as args.formField; older versions may use args.nonFillableFields).
    • You can cancel the action, show an error message, or move focus to an invalid field.

Enable PDF Form Field Validation

To enable validation, set the enableFormFieldsValidation property to true and wire the validateFormFields event.

import * as ReactDOM from 'react-dom/client';
import * as React from 'react';
import './index.css';

import {
  PdfViewerComponent,
  Toolbar,
  Magnification,
  Navigation,
  LinkAnnotation,
  BookmarkView,
  ThumbnailView,
  TextSelection,
  TextSearch,
  Print,
  Annotation,
  FormDesigner,
  FormFields,
  Inject
} from '@syncfusion/ej2-react-pdfviewer';

function App() {
  const viewerRef = React.useRef(null);

  // 1) Default for new Textbox fields: isRequired = true
  React.useEffect(() => {
    const viewer = viewerRef.current;
    if (viewer) {
      viewer.textFieldSettings = { isRequired: true };
    }
  }, []);

  // 2) Validation wiring
  const handleValidateFormFields = (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);
      // If you want to prevent submission:
      // args.isFormSubmitCancelled = true;
    }
  };

  // 3) Add a Textbox on document load
  const handleDocumentLoad = () => {
    const viewer = viewerRef.current;
    if (!viewer) return;

    viewer.formDesignerModule.addFormField('Textbox', {
      name: 'Email',
      bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
      isRequired: true,
      tooltip: 'Email is required'
    });
  };

  return (
    <div className="control-section">
      <PdfViewerComponent
        ref={viewerRef}
        id="pdfViewer"
        documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
        enableFormFieldsValidation={true}
        validateFormFields={handleValidateFormFields}
        documentLoad={handleDocumentLoad}
        style=
      >
        <Inject
          services={[
            Toolbar,
            Magnification,
            Navigation,
            LinkAnnotation,
            BookmarkView,
            ThumbnailView,
            TextSelection,
            TextSearch,
            Print,
            Annotation,
            FormDesigner,
            FormFields
          ]}
        />
      </PdfViewerComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Mark Fields as Required

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

const handleDocumentLoad = () => {
  const viewer = viewerRef.current;
  if (!viewer) return;

  // Creation of a required textbox that blocks printing until filled
  viewer.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, you can control the behavior when fields are missing. Typical actions include:

  • Cancel the print or download operation
  • Display an error message to the user
  • Set focus to the first unfilled required field
// 1) Define the handler in your React component
const handleValidateFormFields = (args) => {
  if (args && args.formField && args.formField.length > 0) {
    // Prevent the pending action (submit/print/etc.)
    args.cancel = true;
    alert('Please fill all required fields. Missing: ' + args.formField[0].name);
    // Optionally: focus/scroll to the field here if needed
  }
};

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