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

Add custom field validation in Content Fragment Model / Content Fragment

Avatar

Level 4

Hello,

 

We have a requirement where we need to add custom field validation when creating a content fragment (CF) using a custom content fragment model (CFM).

Currently when I create a CFM, I only see some limited option like can mark field as required or specify max char limit etc. But what if i need to create a custom date field called "Age" where I can specify Regex or logic that selected date can not be in past date etc, something like that...

 

I know we can create custom data types which I can use in my CFM but I dont see option to add validations on field link Regex, compare values, compare date value with current time etc.

 

We are in AEM 6.5.5.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Mayukh007,

It is possible, I have provided a solution around over a week ago, please take a look here -> https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/ootb-validation-options-fo...

}}

In short, you can use JavaScript to append the "pattern" attribute to a given HTML element, from there it will enable HTML validation for the content fragment field itself. Your client library should have a clientlib category of "dam.cfm.authoring.v2", so when you are on the cfm authoring view, your code will be run.

View solution in original post

9 Replies

Avatar

Correct answer by
Community Advisor

@Mayukh007,

It is possible, I have provided a solution around over a week ago, please take a look here -> https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/ootb-validation-options-fo...

}}

In short, you can use JavaScript to append the "pattern" attribute to a given HTML element, from there it will enable HTML validation for the content fragment field itself. Your client library should have a clientlib category of "dam.cfm.authoring.v2", so when you are on the cfm authoring view, your code will be run.

Avatar

Level 4
hI Brian, Thank you for the solution. What I understood from the solution is that I can add Regex to validate a field. It is not something content author can doo on the fly but Develop need to set the regex for them to use. In my case I have requirement where they will add 2 date fields and need to check if date1>date2...can we achieve this sort of validation...

Avatar

Level 4
Also when i add the code "$('input[name=text_fld]').attr("pattern", 'working|works');" in console, I still see Save button enabled with wrong value.

Avatar

Community Advisor
With the solution I provided, authors would not be able to consider the validation, might have to find something else. In regards to your second question, does the text box turn red at all? Maybe instead of running the javascript line, in the developers console, to manually inject the "patter" html attribute as a test.

Avatar

Level 4

The JS is working now in terms of showing red mark in field but I dont see Save button getting greyed out if I enter "not allowed" value. I can still save the CF.

Also can I use this "pattern" to compare 2 date fields , something link show red mark id Date1>Date2 in that CF...?

Avatar

Community Advisor

@Mayukh007,

Try this: regex to validate more than 1 capitalise letter.

 

$('input[name=carmodel]').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');
    }
});

 

Avatar

Level 4
Hi Brian, Sorry if I misunderstood..but the below solution is also based on single input field....In my case I need to compare values from two different Date input fields in CF and then hide Save button in case Date1>Date2

Avatar

Community Advisor
You would probably need to create some kind of JavaScript validation with HTML5 patterns and manually add 'is-disabled' class to the save button. I don't think there is a out of the box way to handle validation with CF fragment inputs. Can you add a suggestion here for the Adobe AEM Product? https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-ideas/idb-p/adobe-experien...

Avatar

Level 4
Sure Brian..will add the suggestion and thank you for the help/solutioning.