How does Pega perform client-side validation

This is the second post in the series about client-side validation in Pega. In the previous post, we've learned about the ValidationError object. In this post we will describe the steps made by the "Submit" button when we click on it. Also, we will introduce the ValidationType objects and the Validation functions. These elements are the building blocks of client-side validation in Pega so we will need to know their role when implementing it.

We will study ValidationType objects and validation functions that already exist, so we will not create custom ones, that will be the subject of the next post.

Before we start...

Let's create the MobilePhone Edit Validate rule with the following definition.

// Edit Validate: MobilePhone
if (theValue.length() != 9) {
  theProperty.addMessage("The entered value must be 9 digits long");
  return false;
} else if ( !(theValue.startsWith("8") || theValue.startsWith("9")) ) {
  theProperty.addMessage("The first digit must be 8 or 9");
  return false;
} else {
  return true;
}

Create the .PhoneNumber property and set the "Use Validate" option to MobilePhone.

Create a section and include the .PhoneNumber property as a required text input.

Trigger client-side validation manually

We can use the validation_validate function to validate the form. This function is also executed by the "Submit" button to validate the form before submitting the form.

// Validate the form and display the "ValidationError" objects
validation_validate()

We need to make sure that we are in the correct frame (thread) before running the JavaScript codes. The following animation shows how to find the correct frame using the Developer console in Firefox.

The following is the algorithm used by the validation_validate function. We can see new terms like ValidationType, Default function, and ValidationError. We will talk about these terms in the following sections.

1. For each HTML ELEMENT in the form 
   1.1. For each VALIDATION TYPE associated with the HTML ELEMENT 
        1.1.1. Execute the DEFAULT FUNCTION of the VALIDATION TYPE
        1.1.2. Add the VALIDATION ERROR object to the ERROR LIST
2. Display the ERROR LIST

We have already studied the ValidationError object in my previous post: https://deivitpega.blogspot.com/2022/01/display-error-messages-in-html-fields.html

The "ValidationType" object

Let's inspect the source HTML code behind the text input. We can see that the validationtype attribute contains a comma-separated list of labels.

required — Associates the "required" ValidationType object with this text input. This was added because the text input is set as required.
mobilephone — Associates the "mobilephone" ValidationType object with this text input. This was added because the .PhoneNumber property uses the MobilePhone Edit Validate rule.

The validation_ValidationTypes object contains the complete list of registered ValidationType objects.

The "defaultFunction" validation function

Every ValidationType object has a defaultFunction which is a validation function. A validation function is a function that receives an HTML element (and optionally the event name), and returns a ValidationError object if the validation fails.

Inspecting the validation_ValidationTypes.required object, we can see that its defaultFunction is the required_isFilled function.

We can see the definition of the required_isFilled function in the pega_validators.js text file rule.

// Text File: pega_validators.js
function required_isFilled(object, eventType) {

  ...
  
  //Normal processing for all input elements.
  var field = trim(pega.control.PlaceHolder.getValue(object));

  if (null == field || "" == field) {

      if (object.displayName == null || object.displayName == "") {
          object.displayName = validation_getDisplayName(object);
      }

      var errorMessage = required_requiredMsgStr;
      return new validation_Error(object, errorMessage);
  }
}

Now you know how Pega validates the form in the client side. But, what about the mobilephone ValidationType? This ValidationType doesn't exist in the validation_ValidationTypes so we need to create this ValidationType manually, that will be the subject of the next post.

Search This Blog