Geek Answers Handbook

HTML5 input number min max does not work with required

I would like to force the user to enter their age. I would also like to make sure that they only come in between 18-99. Is this possible with HTML5 attributes like required , pattern , min and max ? It looks 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 am using Firefox 22.0 on Ubuntu 12.0.4LTS (also tested on Chrome but not working.) Thank you for your help.

+7
html css html5
source share
3 answers

This is expected behavior because FF21 does not support the min, max attribute ...

you can check it out at http://html5test.com/

Check screenshot enter image description here

+7
source share

Your code is working fine. Check fiddle (I use the latest chrome)

My only concern is that you are your pattern="[1-8][0-9]" , can just use this

 pattern="[0-9]{2}"
+4
source share

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

Below is a working demo: Demo

 <form action=""> <input type="number" name="points" min="1" max="10" name="Q2age" id="Q2age" required> <input type="submit" value="submit" /> </form>
+3
source share

More articles:


All Articles