Elements which are associated with a form via the form="id" attribute but are not children of the form can not properly handle their invalid state. This is caused by the invalid handler which verifies only children of the form instead of all associated elements.
this should fix it:
const firstInvalidInput = Array.from(event.target.form.elements)
.find(element => element.matches(':invalid'));
if (firstInvalidInput !== event.target) {
return;
}