Add validation to Rich Text Editor

Introduction

This guide helps you add validation to a Rich Text Editor form element in Joget.

How does it work?

Follow these detailed steps to integrate server-side validation for the Rich Text Editor in your Joget forms:

1. Drag the Rich Text Editor form element into your form design area.
   
2. Select Beanshell Validator for the Rich Text Editor and add the following the code into the Beanshell field. The code will be in charge of the validation on server side.
   

   This example will perform validation on whitespaces and empty lines through the use of stripHTML, stripping all HTML tags before performing validation. This will ensure reliable and accurate validation as empty spaces and white spaces are interpreted as "<p><br></p> " and "<p> <p>" by the Rich Text Editor. You may change the following code to perform various validation accordingly for example: 

   Length Limitations

   Prohibited Content

   Content Sanitization

   and many more...

   import java.util.Arrays;
   import org.joget.apps.app.service.AppUtil;
   import org.joget.apps.form.model.Element;
   import org.joget.apps.form.model.FormData;
   import org.joget.apps.form.service.FormUtil;
    
   public boolean validate(Element element, FormData formData, String[] values) {
       boolean result = true;
        
       for (String value : values) {
           // Check if editor input is null or is empty
           System.out.println("Stripped: " + stripHtml(value));
           if(value != null && (stripHtml(value).equals(" ") || stripHtml(value).trim().isEmpty())){
               String id = FormUtil.getElementParameterName(element);
               //This will display the custom error message
               //Customize it accordingly 
               formData.addFormError(id, "ILLEGAL VALUE");
               result = false;
           }
           System.out.println(value.trim());
       }
     
       return result;
   }
    
   public String stripHtml(String html) {
       // Remove HTML tags using a regular expression
       return html.replaceAll("<[^>]*>", "");
   }
    
    
   // Call validate method with injected variable
   return validate(element, formData, values);

   

Expected outcome

After implementing the validation logic, test the form to ensure the Rich Text Editor properly handles input according to the validation rules. The form should reject entries that are only whitespaces or empty lines.

Download sample app

This documentation ensures developers can effectively integrate robust validation into the Rich Text Editor, enhancing the data integrity of applications built with Joget.