Text of input is valid always - html

Question

I'm going to realize input of text like this:
<input type="text" maxlength="16" required/>
And want to use valid and invalid stations like this:
input:invalid {
background: #fdd;
}
input:valid {
background: #dfd;
}
But when i write any text my input is valid always. I tried use pattern:
pattern=".{16,}"
But that did not solve anything. Where is my mistake?
The input must be valid when length of input is equal to 16.

Answer 1

You're close! Here's how to do it.
Allowing only alphanumerics
<form>
<input id="username" type="text" pattern="[a-zA-Z0-9]{16}" required>
<input id="submit" type="submit" value="create">
</form>
Allowing any character
<form>
<input id="username" type="text" pattern=".{16}" maxlength="16" required>
<input id="submit" type="submit" value="create">
</form>
With jQuery mask() plugin
Here, we just force the delimiter to be part of the input value followed by the number of characters in each group. In this case 4 numbers followed by a space.
$(document).ready(function() {
$('#username').mask('9999 9999 9999 9999');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>
<form>
<input id="username" type="text" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" required>
<input id="submit" type="submit" value="create">
</form>
For more info about regex and patterns, check out Regexr.

Answer 2

In your code, the attribute maxlength="16" does not allow more than 16 characters to be typed in the input box. The regular expression you are using is valid when the input is between 0 and 16 characters. Therefore, you regexp should be:
.{16,16}
And your HTML code:
<input type="text" pattern=".{16,16}" maxlength="16" required/>
You might want to see it working in this fiddle.