forms - HTML5 Input type "number" in Firefox

Question

I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.

I was working on a very simple feature:

<style> 
input:invalid { background-color: red; }
div.box {
border-color:#000; 
border-width:thin; 
border-style:solid;
}
</style>     
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small> 

It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.

Firefox ... not so much. It acts as if I had a "text" type.

Is that a known issue? Workaround?

Thanks

Answer 1

First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.

This page has details on HTML5 forms and the current bugs https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.