9

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.

Pbk1303
  • 3,702
  • 2
  • 32
  • 47
user1330974
  • 2,500
  • 5
  • 32
  • 60

3 Answers3

7

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

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

Check the screenshot enter image description here

Arun Bertil
  • 4,598
  • 4
  • 33
  • 59
  • 1
    Thank you, @ArunBertil. I think you are right. I'll start checking html5test site you mentioned above before asking hasty questions like this in the future. :) – user1330974 Jul 26 '13 at 15:44
3

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}"
Praveen
  • 55,303
  • 33
  • 133
  • 164
  • 1
    Thank you for your help @user1671639. But I would like my code to work across all browsers. Seems like The answer is that Firefox 21 doesn't support this feature. :) Btw, the pattern is to make sure user doesn't enter "1" as the first digit. If you have a more elegant way to write it in regex, I'd love to learn. :) – user1330974 Jul 26 '13 at 15:46
3

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>
Ian Boyd
  • 246,734
  • 253
  • 869
  • 1,219
web2008
  • 914
  • 4
  • 11
  • thank you for the explanation and taking time to create the demo. You're right. It doesn't work in Firefox so I'll use an alternative method of validating in jQuery. :) – user1330974 Jul 26 '13 at 15:47
  • Your example input has two `name` attributes. – Ben Feb 11 '17 at 15:48