Add custom field validation in Content Fragment Model / Content Fragment

[Mayukh007]

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.

[BrianKasingli · Accepted solution]

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

[Mayukh007]

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

[Mayukh007]

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.

[BrianKasingli]

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.

[Mayukh007]

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

[BrianKasingli]

@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');
    }
});

[Mayukh007]

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

[BrianKasingli]

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

[Mayukh007]

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