Constraint API.

Theory. When your rule is more complex than attributes, use the Constraint Validation API: el.setCustomValidity("text") marks the field invalid with a message. el.setCustomValidity("") — the empty string — returns it to valid.

The key is "clear on change": if you set a message and never remove it, the field stays invalid even after the user fixes it. So listen to the input event and each time set either a message or "".

Small example:

field.addEventListener("input", () => { if (field.value.length < 3) field.setCustomValidity("too short"); else field.setCustomValidity(""); });

After that field.validity.valid is false and field.validationMessage is your message. checkValidity() returns a boolean; reportValidity() shows the browser bubble.

Common mistake: setCustomValidity without resetting; resetting only on submit; setting the message on the wrong element.