OOTB Validation options for Content Fragment Model Data Type

Avatar

Avatar

NehaCMS

Avatar

NehaCMS

NehaCMS

14-01-2021

Hi Team,

 

Looking into Validation section at https://experienceleague.adobe.com/docs/experience-manager-cloud-service/assets/content-fragments/co... 

Validation

Various data types now include the possibility to define validation requirements for when content is entered in the resulting fragment:

  • Single line text
    • Compare against a predefined regex.
  • Number
    • Check for specific values.

 

But while creating content fragment model and  using single line text property or number property could not see option to provide validation regex. We are using AEM 6.5.6.0. Let me know how same can be added on fields.

Content Fragment Model Data Type

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

BrianKasingli

MVP

Avatar

BrianKasingli

MVP

BrianKasingli
MVP

14-01-2021

@NehaCMS,

Sure that the documentation says regex validation, but from experience, I don't think there's an out of the box way of adding validation to content fragment form fields with regex, however, you can create your own via JavaScript and client libraries!

In the past, I have created a client library that would inject HTML5 input pattern attribute in regex to each form field. Once the pattern field has been added into the input field, the disabled vs enabled submit button will automatically work as expected & also a red error box is shown (look at the screenshot in the bottom of the page). Before creating your own client library, you should go directly to the /dam/my-site/content-fragment's edit page (NOT THE content fragment template), and then paste this line of code in your developer's console. $('input[name=myinputfield]').attr("pattern", 'working|works').... make sure you change the name=myinputfield to your own input fields name. Once when you know how it works, you can proceed with the steps below.

  1. Create a new client library (categories should be:  dam.cfm.authoring.v2)
  2. Write your own JavaScript validation using HTML pattern

 

 

$('input[name=myinputfield]').first().attr('pattern', '[A-Z]+');
let $form = $('#aem-cfm-editor-elements-form');
let $saveBtn = $('.button-apply');
$('input').on('keyup', function() {
    if ($form[0].checkValidity()) {
        $saveBtn.removeClass('is-disabled');
    } else {
        $saveBtn.addClass('is-disabled');
    }
});

 

 

Invalid - expecting regex pattern or working|works (red box displays, save button disabled)

BrianKasingli_0-1610664718895.png

Valid - matches regex pattern or working|works (red box does not exist, save button enabled) 

BrianKasingli_1-1610664824727.png

Client library

BrianKasingli_0-1610665621520.png

 

 

I hope this works, 
Brian.

 

 

Answers (0)