I need the input field to turn green only when it contains 4 letters followed by 4 numbers, like "abcd1234".
The regular expression code I tried is: [A-Za-z]{4}+[0-9]{4}
.
I also attempted this code: ^[A-Za-z]{4}+[0-9]{4}$
.
Below is the CSS code I'm using:
input:invalid {
background: hsla(0, 90%, 70%, 1);
}
input:valid {
background: hsla(100, 90%, 70%, 1);
}
<input type='text' required name='username' autocomplete="off" id='username' pattern="[A-Za-z]{4}+[0-9]{4}" maxlength="50" />
However, the field doesn't change to the :valid
state as expected.