Provide custom JavaScript form validation using the validateForm method

This sample shows how to add a complex custom form validation and field calculation logic in JavaScript code by using the validateForm method.

window.onload = function() { //DsPdfViewer.LicenseKey = "***key***"; let viewer; window.gcd = function(a, b) { if (!b) return a; return gcd(b, a % b); } window.solveForm = function() { let fldValue1 = viewer.findAnnotation('fldValue1', {findField: 'fieldName'}), fldValue2 = viewer.findAnnotation('fldValue2', {findField: 'fieldName'}), fldResult = viewer.findAnnotation('fldResult', {findField: 'fieldName'}); Promise.all([fldValue1, fldValue2, fldResult]).then(function(arr) { fldValue1 = arr[0][0].annotation; fldValue2 = arr[1][0].annotation; fldResult = arr[2][0].annotation; fldResult.fieldValue = gcd(fldValue1.fieldValue, fldValue2.fieldValue); viewer.updateAnnotation(0, fldResult); }); } window.validateForm = function() { let a, b, result, expectedAnswer; let validationResult = viewer.validateForm(function(fieldValue, field) { switch(field.fieldName) { case 'fldValue1': a = parseFloat(fieldValue); break; case 'fldValue2': b = parseFloat(fieldValue); break; case 'fldResult': result = parseFloat(fieldValue); break; } if(a && b && result) { expectedAnswer = gcd(a, b); if(parseFloat(fieldValue) !== expectedAnswer) { return 'Incorrect answer.'; } } return true; }, true); if(expectedAnswer) { if(validationResult !== true) { viewer.showMessage(validationResult, 'Correct answer is ' + expectedAnswer, 'error'); } else { viewer.showMessage('Your answer is correct.', null, 'info'); } } else { viewer.showMessage('Please input your answer.', null, 'warn'); } setTimeout(function(){ viewer.repaint([0]); }, 100); } viewer = new DsPdfViewer("#viewer"); viewer.addDefaultPanels(); viewer.options.jsExecutionConfig = { // Handler function which will be called before JS action execution started. before: function() { // Returned promise will be awaited before further JS execution. return new Promise(function(resolve) { if(document.activeElement && document.activeElement.blur) document.activeElement.blur(); setTimeout(resolve, 100); }); }, // Handler function which will be called after JS action execution finished. after: function() { } }; viewer.open("/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/viewer-custom-validation.pdf"); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Localization</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/styles.css"> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/dspdfviewer.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/product-bundles/build/wasmSupportApi.js"></script> <script src="/document-solutions/javascript-pdf-viewer/demos/resource/js/init.js"></script> <script src="./src/app.js"></script> </head> <body> <div id="viewer"></div> </body> </html>
#viewer { height: 100%; }