Ran into an issue earlier today that I could not figure out and ended up asking my second question on StackOverflow in seven years.
I was trying to use <input type="number" pattern="[0-9]{8}">
to enforce 8-digit numbers while allowing leading zeros. This was being done on an optional field (no required
attribute) and I could not understand why it was bypassing my pattern on the populated field (eg: value “1234” was accepted, pattern ignored).
Peter B. over at SO (kudos) pointed me to the MDN reference that provided the reason… number input does not support pattern attribute
By design! While their reasoning makes sense from a general perspective, the min/max attribute workaround does not help where leading zeros are acceptable (eg: min="00000001"
is the same as min="1"
for obvious reasons). Unfortunately I need all 8-digits for my purposes. I also tried using minlength
and maxlength
attributes as a hail-mary to no avail.
Here is a jQuery shim I wrote for my main script file thereby adding pattern support the <input type="number">
Continue reading Add Pattern Support for HTML5 Input Type Number with jQuery