The "Must fill" requirement not pop up for content fragment property with required="on"

[HanLu1]

Hi Techs

I am trying to add a multi-field single line text property in a content fragment model like this:

And I want to add the required="on" property to the child level like this:

So user won't see the "Must fill" info unless user click add button.
But here comes an issue, the "Must fill" will not pop up until I refresh the page:
Add a line

Then refresh the page :

How can I fix this? Any suggestions will very helpful!
Thank you

[manikandan90]

Hi @HanLu1 ,

You need to uncheck the required and use custom JS / clientlib to validate the fields. 

[gangadharpotala · Accepted solution]

Hi @HanLu1 ,

When you set required="on" inside a nested multifield item in a Content Fragment Model, AEM only evaluates the validation rules during the model editor’s initial load.
That’s why the Must-fill message appears only after a page refresh because the Coral UI components are re-initialized at that moment.

This happens because the child input (inside the multifield repeatable block) is added dynamically, but the Coral validation API is not re-applied automatically after the “Add” action.

You need to make sure the Coral validation is re-initialized every time a new multifield item is added.
A simple clientlib with a small JS snippet can solve this.

Hope this will helps you 🙂