HTML5 Form Input Pattern Currency Format

Question

Using HTML5 I have an input field that should validate against a dollar amount entered. Currently I have the following markup:

<input type="number" pattern="(\d{3})([\.])(\d{2})">

This works great for an amount that is greater than 100.00 and less than 1,000.00. I am trying to write the pattern (regex) to accept different dollar amounts. Maybe upwards of 100,000.00. Is this possible?

Some people use commas as decimal separator. Do you need localization? — Maksym Kozlenko
– Maksym Kozlenko, Commented Oct 6, 2015 at 22:56

RapPayne · Accepted Answer · 2013-12-24 22:14:45Z

49

The best we could come up with is this:

^\\$?(([1-9](\\d*|\\d{0,2}(,\\d{3})*))|0)(\\.\\d{1,2})?$

I realize it might seem too much, but as far as I can test it matches anything that a human eye would accept as valid currency value and weeds out everything else.

It matches these:

1 => true
1.00 => true
$1 => true
$1000 => true
0.1 => true
1,000.00 => true
$1,000,000 => true
5678 => true

And weeds out these:

1.001 => false
02.0 => false
22,42 => false
001 => false
192.168.1.2 => false
, => false
.55 => false
2000,000 => false

edited Dec 24, 2013 at 22:14

RapPayne

7,3203 gold badges54 silver badges95 bronze badges

answered Oct 4, 2012 at 17:54

Andrey Santrosyan

5911 gold badge4 silver badges6 bronze badges

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

6 Comments

mbomb007 Over a year ago

@Bartezz Commas are not valid decimal separators for use in programming languages AFAIK. Computers were invented in the U.S., so periods as the decimal separator is the standard on the web.

Bartezz Over a year ago

@mbomb007 there is a big difference between programming language and user input. Since most of the 7 billion people on this planet don't know programming language your vision is more than short sighted. Besides read up on the history of computers. You shouldn't have skipped those history classes or if you didn't at least request your money back...

mbomb007 Over a year ago

@Bartezz I've read lots. It was created at Iowa State University. Sure, there wasn't necessarily currency on it yet, but all the major companies like MS and Macintosh as well as W3C (founded at MIT), etc are from the U.S.

matto0 Over a year ago

FYI in putting into an input tag I had to change the double escapes to single so ... ^\$?(([1-9](\d*|\d{0,2}(,\d{3})*))|0)(\.\d{1,2})?$ other then that it works well

theking2 Over a year ago

Going with numeric for money values is not the proper way. As the original designers lived on an island called the USoA, thanks mbomb007, you'll have to implement your own version

|

jordan · Accepted Answer · 2015-10-06 22:38:52Z

30

If you want to allow a comma delimiter which will pass the following test cases:

0,00  => true
0.00  => true
01,00 => true
01.00 => true
0.000 => false
0-01  => false

then use this:

^\d+(\.|\,)\d{2}$

edited Oct 6, 2015 at 22:38

jordan

11k10 gold badges47 silver badges81 bronze badges

answered Nov 21, 2011 at 11:28

wormhit

3,8772 gold badges41 silver badges48 bronze badges

2 Comments

Sk446 Over a year ago

FYI - the above regex doesnt actually prevent the likes of 10.000 - it should really shorten it to 10.00 but it doesnt.

Wojciech Owczarczyk Over a year ago

If you would also like to capture non-decimal values use this: ^\d+((\.|\,)\d{2})?$

Toto · Accepted Answer · 2011-05-11 12:22:26Z

6

How about :

^\d+\.\d{2}$

This matches one or more digits, a dot and 2 digits after the dot.

To match also comma as thousands delimiter :

^\d+(?:,\d{3})*\.\d{2}$

edited May 11, 2011 at 12:22

answered May 11, 2011 at 11:10

Toto

91.7k63 gold badges97 silver badges135 bronze badges

1 Comment

Justin Over a year ago

I know it's an old question and answer, but you can ensure there are 1-3 decimals are in the finish digit group. ^\d{1,3}(?:,\d{3})*\.\d{2}$

user1809464 · Accepted Answer · 2012-11-08 14:06:13Z

6

Another answer for this would be

^((\d+)|(\d{1,3})(\,\d{3}|)*)(\.\d{2}|)$

This will match a string of:

one or more numbers with out the decimal place (\d+)
any number of commas each of which must be followed by 3 numbers and have upto 3 numbers before it (\d{1,3})(\,\d{3}|)*

Each or which can have a decimal place which must be followed by 2 numbers (.\d{2}|)

answered Nov 8, 2012 at 14:06

user1809464

611 silver badge2 bronze badges

Comments

guzart · Accepted Answer · 2013-04-21 08:03:03Z

3

I like to give the users a bit of flexibility and trust, that they will get the format right, but I do want to enforce only digits and two decimals for currency

^[$\-\s]*[\d\,]*?([\.]\d{0,2})?\s*$

Takes care of:

$ 1.
-$ 1.00
$ -1.0
.1
.10
-$ 1,000,000.0

Of course it will also match:

$$--$1,92,9,29.1 => anyway after cleanup => -192,929.10

answered Apr 21, 2013 at 8:03

guzart

3,73030 silver badges23 bronze badges

Comments

husmen73 · Accepted Answer · 2016-09-23 14:38:57Z

2

I'm wrote this price pattern without zero price.

(0\.((0[1-9]{1})|([1-9]{1}([0-9]{1})?)))|(([1-9]+[0-9]*)(\.([0-9]{1,2}))?)

Valid For:

1.00
1
1.5
0.10
0.1
0.01
2500.00

Invalid For:

0
0.00
0.0
2500.
2500.0000

Check my code online: http://regexr.com/3binj

edited Sep 23, 2016 at 14:38

answered Jun 30, 2015 at 9:37

husmen73

971 silver badge10 bronze badges

1 Comment

Lucas Matos Over a year ago

works fine but it is possible to enter the letter 'e'

Giovanni Malacaria · Accepted Answer · 2022-07-14 08:37:34Z

0

this in my pattern currency '[0-9]+(,[0-9]{1,2})?$' also input type text

valid for:

1
0,01
1,5
0,10
0,1
0,01
2500,00

answered Jul 14, 2022 at 8:37

Giovanni Malacaria

316 bronze badges

Comments

Yesu Raj · Accepted Answer · 2014-11-23 14:55:53Z

-1

Use this pattern "^\d*(\.\d{2}$)?"

answered Nov 23, 2014 at 14:55

Yesu Raj

3243 silver badges5 bronze badges

Collectives™ on Stack Overflow

HTML5 Form Input Pattern Currency Format

8 Answers 8

6 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

2 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related