How to enable client-side validation for an input field on work object form
Summary
Client-side validation ensures that data entry on a work object form is correct before the form is submitted to the application server. For example, if a user enters an incorrect date into a date field (for example 2/30/2007), an error notification appears when the focus exits the date field.
Client-side validation can occur on both a value received from an external system and on a Process Commander property for which users enter data on a form. Enabling client-side validation on a property on a Harness rule requires you to:
- Create a custom edit validate rule (Rule-Edit-Validate rule type). This allows you to define a Java routine that tests the validity of a data entry value.
- Select the Enable Client Side Validation check box on the HTML tab of the Harness forms on which the property requiring validation appears.
- Add a JavaScript validator to the Harness form — a JavaScript function that, executed in the browser window, exactly replicates the test performed by the edit validate rule. The JavaScript validator resides in the Rule-File-Text instance.
Update: Instructions in this article are correct through V54.SP1 only.
For V5.4SP2 and later, place your JavaScript validator code in a Rule-HTML-Fragment rule named CustomValidators (by overriding the empty standard HTML fragment with that name.)
Using an HTML fragment, rather than a text file rule, allows your JavaScript validator code to contain JSP tags and be processed by stream processing.
Suggested Approach
For information on creating a Rule-Edit-Validate rule and selecting the Enable Client Side Validation check box, see the Application Developer Help system.
To add a JavaScript validator to the Harness form, use the following procedure:
- Add your new custom Rule-Edit-Validate rule to the Input Processing section of the Property form. The sample below shows a Rule-Edit-Validate rule of NotFutureDateTest. To trigger client-side validation, the JavaScript must contain a "data type" that exactly matches this name.
- Create a new JavaScript validator by performing a Save As on the Rule-Text-File instance named pega_validators. The sample below shows a new Rule-File-Text instance of pega_validators_Test:
- Add code similar to the following to the File Source section of the new Rule-File-Text instance:
The code below is used for demonstration purposes, and assumes that the JavaScript function that matches the edit validate rule is named ruleEditValidate_isNotFutureDate.(The JavaScript function and the edit rule code may be very similar, but will differ in syntax and structure due to language differences between JavaScript and Java.)
Your code will differ depending on the property you are validating. Note that the JavaScript locates this section by matching the name of the edit validate rule referenced in the property: "IsNotFutureDateTest" in this example./* IsNotFutureDateTest */
var ruleEditValidate_notFutureDateTest = new validation_ValidationType("notfuturedatetest", ruleEditValidate_isNotFutureDate);
ruleEditValidate_notFutureDateTest.addEventFunction("onchange", ruleEditValidate_isNotFutureDate); - Add the new Rule-File-Text instance (in this example, pega_validators_Test) to the Scripts section of the Scripts and Styles tab of the Harness form: