HTML5 input pattern not working in input type="number"

Question

I used input pattern in input type="text" its working its working code

<input name="name" required pattern=".{4,}" title="Please Enter Correct Name" type="text" />

But when I used input pattern in input type="number" its not working

<input name="number" required type="number" pattern=".{9,20}" title="Please Enter Your Number at least 9 Digit" />

Doesn't work with type="number". Check this out html.spec.whatwg.org/multipage/forms.html#do-not-apply — Krrish Raj
– Krrish Raj, Commented Apr 19, 2017 at 7:30
You should use JavaScript instead of pattern on number input. — Clone
– Clone, Commented Apr 19, 2017 at 7:30
^^ and here: w3.org/TR/html5/forms.html#number-state-(type=number) - point 4 under bookkeeping details. — Abhitalks
– Abhitalks, Commented Apr 19, 2017 at 7:32
By the way, required="true" is wrong; it should be either just required or required="required". See W3C. — Mr Lister
– Mr Lister, Commented Apr 19, 2017 at 8:01
@MrLister actually that is incorrect if you are supporting IE. Older versions of Internet explorer only recognize required="true". since all other browsers only need the required attribute to be present, required=true is the most universal version — TheRealMrCrowley
– TheRealMrCrowley, Commented Sep 14, 2017 at 19:39

shubham agrawal · Accepted Answer · 2017-04-19 07:30:23Z

6

From MDN

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.

answered Apr 19, 2017 at 7:30

shubham agrawal

3,5818 gold badges22 silver badges31 bronze badges

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

Comments

Hulothe · Accepted Answer · 2017-04-19 07:42:54Z

4

The pattern attributes only works with text, date, search, url, tel, email, and password input types: HTML5 input specification. Scroll down a bit and you will see a table telling you which attributes can be used with the different input types.

You should use javascript to achieve what you want to do.

edited Apr 19, 2017 at 7:42

answered Apr 19, 2017 at 7:27

Hulothe

7641 gold badge6 silver badges17 bronze badges

Comments

ToujouAya · Accepted Answer · 2017-04-19 07:42:23Z

1

The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. Therefore you can't use it with input number You can check here

edited Apr 19, 2017 at 7:42

answered Apr 19, 2017 at 7:27

ToujouAya

5936 silver badges24 bronze badges

Collectives™ on Stack Overflow

HTML5 input pattern not working in input type="number"

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related