Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

OOTB Validation options for Content Fragment Model Data Type

Avatar

Level 5

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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.

 

 

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

@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.

 

 

Avatar

Level 5

Thanks @BrianKasingli . Can you please also tell if custom data types be created for content fragments