Table of Contents

Using JavaScript for client-side validation

Client-side validation ensures that user inputs are validated before a form is submitted, so that users receive immediate feedback on their errors. Client-side validation simplifies your application by preventing users from entering invalid data. For example, if a user is completing a form and enters a string or decimal in a quantity field that is set to accept only integers, an error message is displayed before the user submits the form. Client-side validation can occur on both a value that is received from an external system and on a property for which users enter data on a form.

In Pega® Platform, you can configure client-side validation in the user interface and require users to enter the correct values by adding a JavaScript validator to the Harness form. The validator is a JavaScript function that, when run in the browser window, replicates the test performed by the edit validate rule. Enabling client-side validation on a property on a Harness rule requires you to do the following actions:

  • Select the Enable Client Side Validation check box on the Advanced tab of the Harness form on which the property requiring validation appears.
  • Create a custom edit validate rule (Rule-File-Text rule type) so that you can define a Java routine that tests the validity of a data entry value.
  • Add a JavaScript validator to the Harness form — a JavaScript function that, when run in the browser window, replicates the test performed by the edit validate rule. The JavaScript validator is in the Rule-File-Text instance.

Validating with custom JavaScript

To implement client-side validation with custom JavaScript, the validation logic is created in a JavaScript file. This file is then included in the harness and invoked from the HTML code of a non-autogenerated section.

Creating the script

  1. Open the harness that contains the field that you want to validate, and then click the Advanced tab. By default, the client-side validation is enabled on all forms, so the fields that use edit validate rules are validated before the form is submitted. If client-side validation is not enabled in the current harness, select the Enable client side validation check box.
  2. Click the Scripts & Styles tab, and select js from the Type menu.
  3. Enter a name for your script and click the Open icon to create the text file rule that will contain your script. The JavaScript validator is in the Rule-File-Text instance.
  4. Add the validation script to the text file rule. You can also upload a text file directly to the text file rule.
  5. Save and close the text file. It is now associated with the harness by the reference on the Scripts & Styles tab.

Adding the script to a control

When the JavaScript file is included in the harness, the JavaScript functions that implement validation logic can be invoked directly from the HTML code of a non-autogenerated section rule. Update the HTML property rule that is associated with the specific field. Attach an event such as OnChange or OnSubmit.

Suggest Edit

40% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.