HTML5 input number min max not working with required

Question

I would like to force the user to type their age. I also would like to make sure they only enter between 18-99. Is that possible with HTML5 attributes like required, pattern, min and max? Seems like it is not working

<form>
    <input type="number" name="Q2age" id="Q2age" size="10" min="18" max="99" pattern="[1-8][0-9]" required>
    <button type="submit" class="button" id="test">Submit</button>
</form>

Am I doing something wrong here? I use Firefox 22.0 on Ubuntu 12.0.4LTS (tested on Chrome as well, but doesn't work.) Thank you for your help.

Answer 1

It doesn't work in Firefox but it works in Chrome, Internet Explorer, Safari and Opera.

Please find the working demo here: Demo

<form action="">

<input type="number" name="points" min="1" max="10" name="Q2age" id="Q2age" required>

 <input type="submit" value="submit" />
</form>

Answer 2

Your code works fine. Check this fiddle (I'm using latest chrome)

My only concern you is your pattern="[1-8][0-9]" can simple use this

pattern="[0-9]{2}"

Answer 3

This is the expected behaviour because FF21 doesnt supports min,max attribute...

you can check it in http://html5test.com/

Check the screenshot