HTML5 validation fails when:
-
Wrong regex style
-
Missing anchors
-
Using lookaheads (not supported)
-
Using unescaped characters
❌ Wrong
<input pattern="[A-Z]{3}-[0-9]+" />
✔ Correct
Always anchor:
<input pattern="^[A-Z]{3}-[0-9]+$" />
💡 Life-Saving Detail
HTML5 pattern must match the entire string.
Not a substring — the whole value.
This rule is rarely known and causes hours of debugging.