How can I help you?
Validate PDF Form Fields in MVC PDF Viewer
6 Feb 20268 minutes to read
The Syncfusion MVC 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 all required form fields are filled before allowing these actions to complete.
This feature helps enforce data completeness and improves the reliability of collected form data.
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 listed in 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.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfViewer').ej2_instances[0];
// 1) Default for new Textbox fields
pdfviewer.textFieldSettings = { isRequired: true };
// 2) Validation wiring
pdfviewer.enableFormFieldsValidation = true;
pdfviewer.validateFormFields = function (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 once the document is loaded)
pdfviewer.documentLoad = function () {
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.
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfViewer').ej2_instances[0];
// Creation of a required textbox (inside documentLoad) that blocks printing until it is filled.
pdfviewer.documentLoad = function () {
pdfviewer.formDesignerModule.addFormField('Textbox', {
name: 'Email',
bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
isRequired: true,
tooltip: 'Email is required'
});
};
});
</script>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
<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var pdfviewer = document.getElementById('pdfViewer').ej2_instances[0];
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
}
};
});
</script>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.