Why is input pattern attribute not working for numerics?

Question

I can't get the pattern attribute on a text input to be limited to numbers. According to the javascript regular expressions list, [d] or [0-9] should do it. But in

<input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" minlength="9" maxlength="9" autocomplete="off" /> 

it doesn't work for me (in any browsers). I have to add js validation such as the following (decided to go this route for simplicity based on this post):

HTML:

onkeypress='return isNumberKey(event)'  

js:

function isNumberKey(evt){     var charCode = (evt.which) ? evt.which : event.keyCode     if (charCode > 31 && (charCode < 48 || charCode > 57))         return false;     return true; } 

I mainly want to know if there's a way I can get the pattern attribute to work. But also feel free to comment on whether I'm using best practices route for this. I don't want to use HTML5 <input type="number"/> as it's not widely supported enough yet.

Answer 1

The validation for the pattern attribute will not prevent writing incorrect information into the field, but it will prevent submitting the form. The element also has an oninvalid event that will be called when the validation fails during the submit.

Alternatively, you can also use the CSS selectors :valid and :invalid to provide instant visual feedback.

Fiddle showing both (based on Jerry's fiddle from the comments): http://jsfiddle.net/bHWcu/1/

<form onsubmit="alert('Submitted');">     <input dir="ltr" type="text" title="Enter numbers only." pattern="[\d]{9}" id="uid" name="1" placeholder="Enter UID" required="'required'" class="required placeholder" maxlength="9" autocomplete="off" />     <input type="submit" value="Submit" /> </form> 

Note that any client-side validation should only be used for fast feedback to improve the user experience. The actual validation should always be done server-side, as the client-side validation can easily be cheated.