How to make a specific Required field option for rich text?

Ask us anything How do I?
1

Hi all experts and developers!

I need to be able to set a validity check in the Rich Text element to require the field to be filled in (similar to the Input field). I didn’t see the same option, can I do this arbitrarily?

image
image1267×627 47.4 KB

image
image1289×785 63.4 KB

Any hints would be appreciated.

2

Hi Alexander :waving_hand:

For simplicity I would always prefer using a regular input for validation and making it “required”.

But if you must indeed use a rich text you can create your own custom “requirement and validation” with AI.

You will need to create (or the AI will create for you) a couple variables and a general workflow that will check if your form is valid and filled before submitting.

1 Like
3

@Agustin_Carozo thanks for your tip, I was also thinking about having to do custom validation settings for Rich Editor. But also wondered if there might be some inbuilt way that I hadn’t noticed. Since there is no inbuilt (as there is for a simple input field) validation mode, I will take your hint into consideration and try to do as you wrote. Thanks again!

1 Like
4

I made a custom validation using AI to check for “non-empty value” - using JS expression in a field with a formula. The usual formula (value construction) didn’t work, because I couldn’t find a way to remove specific characters (HTML tags) and leave only text. By the way, the formula is a usual calculation of the length of the text entered in the field with the condition “if the length is > 0, then - true, otherwise - false”. But in Rich Text - there are always “invisible” HTML characters (at least for me) and they always show “true”, even if visually the field is empty. So I had to ask AI to write a JS formula with “clearing” tags before calculation.

Below is a sample of what I got and it works when the form is submitted (i.e. if the value is “false”, the form is not submitted and the workflow is not executed). However, you need to be careful and make some special alert (“signalling”, “visual”), for this field, because visually there is nothing that tells you why the form is not being submitted and clicking on the Submit button does not work. This can be misleading.)) You need to be careful and don’t forget that you have a custom validity check created in the Rich Text field.

Maybe someone else will find this solution useful:

// Get the rich text content
const richText = context.local.data?.form?.formData?.['Rich text'] || '';

// Remove HTML tags and decode HTML entities
const cleanText = richText
    .replace(/<[^>]*>/g, '') // Remove HTML tags
    .replace(/&lt;/g, '<')
    .replace(/&gt;/g, '>')
    .replace(/&amp;/g, '&')
    .replace(/&nbsp;/g, ' ')
    .trim();

// Check if there's any content after cleaning
return cleanText.length > 0;

image
image1900×853 185 KB

1 Like