Display error messages in HTML fields

In this post we will learn how to display and clean up error messages in the HTML fields of a Pega form manually using JavaScript.

This post is part of a bigger one in which we will create custom client-side validations, and since that post was getting too big I decided to split it into small posts (divide and conquer!)

The "ValidationError" object

The ValidationError object just contains an error message and a reference to the HTML element to attach the error message.

We can create a ValidationError object using the validation_Error constructor which is defined in the csvalid.js text file rule.

// Creates a new ValidationError object
var errorObj = new validation_Error(elementHTML, "Hello World!");

Display a ValidationError object

Creating a ValidationError object is not sufficient for it to be displayed in the user interface. We can display the ValidationError object manually using the display_addImageError function which is defined in the pega_validators.js text file rule.

// Displays the ValidationError object in the User Interface
display_addImageError(errorObj);

Clear an error message

We can clear the error message manually using the display_removeErrorImage function which is defined in the pega_validators.js text file rule.

// Clears the error message in the HTML element
display_removeErrorImage(elementHTML);

Adding an error message in the field does not mean that the form is invalid. The error message we have displayed produces only a visual effect and is not a validation error.