AEM Touch UI richtext validations

In this article, I am going to cover how to perform Touch UI richtext validations in AEM 6.2, in AEM 6.2 the adobe introduced new validation framework which is based on Granite UI, so it is best practice to use Granite UI validations instead of Jquery based validations which were used to perform validations in AEM 6.1

Here, I am going to take simple text component, which has only one richtext editor field, by default the RTE does not support required field validator, so I am going to write simple Javascript which makes this rte field as required field

First thing, which I am going to do is create a client library folder and the type for this is cq:ClientLibraryFolder, then  add a String property categories with value cq.authoring.dialog and dependencies value underscore to the clientlibs folder

Then create a new file in the clientlibs folder called validations.js and add this in the js.txt of client libs, in the validations.js file add below code

Now, go to your text component and add required=true boolean property to the rich textxt field, something like below

rtevalidator

Open a page and try to save the dialog without entering any text in the richtext field, you must see error message “Please fill out this field” , refer below screen shot

rtevalidatorerror

  • Julio Baixauli (Seidor)

    Hi Raj.

    I would suggest you two changes in your code:

    1 – Change foundation-contentloaded event for dialog-ready event, as foundation-contentloaded is fired many times, so the is added many times also:
    // $(document).on(“foundation-contentloaded”, function(e) {
    $(document).on(“dialog-ready”, function(e) {

    2 – To allow many RTE fields in the dialog, you would change the ‘closest(“form.foundation-form”)’ by ‘closest(“.coral-Form-fieldwrapper”)’. This way, the validate function only affects the current field:
    // var $form = $(el).closest(“form.foundation-form”);
    var $form = $(el).closest(“.coral-Form-fieldwrapper”);

    Hope this helps,
    Julio.