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.

Arun Bertil · Accepted Answer · 2013-07-26 04:52:07Z

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

answered Jul 26, 2013 at 4:52

Arun Bertil

4,6584 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1330974 Over a year ago

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. :)

Praveen · Accepted Answer · 2013-07-26 05:03:59Z

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}"

edited Jul 26, 2013 at 5:03

answered Jul 26, 2013 at 4:37

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

1 Comment

user1330974 Over a year ago

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. :)

Ian Boyd · Accepted Answer · 2013-11-21 21:40:14Z

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>

edited Nov 21, 2013 at 21:40

Ian Boyd

259k271 gold badges920 silver badges1.3k bronze badges

answered Jul 26, 2013 at 4:49

web2008

9144 silver badges11 bronze badges

2 Comments

user1330974 Over a year ago

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. :)

Ben Over a year ago

Your example input has two name attributes.

Collectives™ on Stack Overflow

HTML5 input number min max not working with required

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related