OOTB Validation options for Content Fragment Model Data Type

[NehaCMS]

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.

[BrianKasingli · Accepted solution]

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

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

Client library

I hope this works, 
Brian.

[NehaCMS]

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

[BrianKasingli]

https://experienceleague.adobe.com/docs/experience-manager-64/developing/extending-aem/customizing-c...