Vuejs 6.0.22 Validation Error-message-force error-message issue

Hello,

I have an issue with error-message and error-message-force, they don’t update the dom correctly, and in some cases they overlay 2 dom elements of class error-message which is ugly.

Basically when using the error-message-force , it should re-use the error-message dom element, instead of creating another one.

image

Right now im using this css solution:
/Fix issue with error message force overlay/

.item-input .item-input-error-message:nth-child(-n+2):not(:last-child) {

display: none;

}

I have this sandbox explaining:

Error message shouldn’t be empty if you use custom ones, otherwise it leads to F7 Core generate another div with system default error message

I understand, but still if someone wants to dynamically set the error-force false, and error-message false, it should fallback to the native required message that the browser uses, and in this case you could make the code re-use the error-message class if it already exists in dom. This could improve this edge cases.