Skip to main content
This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.
LinkedIn
Copied!

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.

Did you find this content helpful?

28% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us