Inconsistent behaviour for HTML patterns - html

Question

I'm trying to get HTML patterns to work. The behaviour I expect is that as soon as text that doesn't match a given pattern is entered into an input, the edges of the input will turn red (error state), and go back to normal as soon as the text matches the pattern again. This is the pattern I'm using - for non-regex people, it allows characters from the alphabet, both upper and lower case, and requires exactly three characters.
<input type="text" pattern="[A-Za-z]{3}">
I couldn't get this behaviour working reliably in my project, so I took this example from W3Schools: https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_input_pattern to test it.
When I load it in Firefox (latest version):
After entering invalid data for the first time after the page renders, I need to click somewhere else (the input needs to lose focus) for the input to go into error state.
After this, if I enter valid data and click somewhere else, the state of the input goes back to normal. (expected behaviour)
However, if I then enter invalid data without the input losing focus, the error state is still not triggered.
When I test it in Chrome (latest version, again), the input simply never turns red, no matter what I enter or where the focus is.
Not only does the pattern not behave how I expected, but it does not behave consistently from browser to browser.
Can anyone explain this? Is this an official feature? I know it doesn't behave consistently on mobile browsers, but it should on major desktop browsers (platform in Win7 FWIW)

Answer 1

HTML5 validation styled differently across browsers. While supporting browsers will all prevent a form submission if it's invalid, everything outside of that is a browser design decision.
You can attempt to enforce certain behaviors using JavaScript. For example, if you want some kind of immediate feedback for invalid input, you can attach a handler to the input event.
document.querySelector('input').addEventListener('input', function(e) {
if (!e.currentTarget.checkValidity()) {
e.currentTarget.classList.add('invalid');
} else {
e.currentTarget.classList.remove('invalid');
}
});
.invalid {
background-color: red;
}
<form>
<input type="text" pattern="[A-Za-z]{3}">
<input type="submit">
</form>
Obviously you'll want better custom styling, and something that doesn't clash with the native "invalid state" styling of major browsers, but this at least gets you started in the right direction.
You could also force the browser to report validity on the input event. But you may find most browsers' behavior for reportValidity is a bit too loud to show on each invalid input.
document.querySelector('input').addEventListener('input', function(e) {
e.currentTarget.reportValidity();
});
<form>
<input type="text" pattern="[A-Za-z]{3}">
<input type="submit">
</form>