Configuration or Validation message for Components preview mode not disappearing

Implementing the OOTB functionality for showing the validation message for the AEM components

If you are implementing the components in touch UI and you have validation messages in your component for example when author drag & drop List component on the page then you might want to display the message as "Please configure List Component"

You might be interested in showing this message only in the Author instance not in preview mode or publish instance. You might implement this in following way :- 

data-sly-test="${!model.title && wcmmode.edit}"> Please configure title

When Author drag & drop above component first time and he has not entered any title and if he is in edit mode then he will get the above configuration message

But the problem here is in touch UI when you click on Preview button, still you will get this message and for that purpose you have to refresh the page

To avoid this you need to implement this similar to OOTB components.

You can refer to any OOTB component for example List , Carousel etc

To implement same way , you need to have a div with the class cq-placeholder & cq-Overlay as given below

data-sly-test="${!model.title && wcmmode.edit}" class="cq-placeholder cq-Overlay">Please configure title

This will make sure when you click on the Preview Button then it will hide the entire div