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, Oct 06 '15 at 22:56

score 49 · Answer 1 · edited Dec 24 '13 at 22:14

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 '13 at 22:14

Rap

6,851
3
50
88

answered Oct 04 '12 at 17:54

Andrey Santrosyan

591
1
4
6

@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. – mbomb007 Dec 01 '15 at 19:27
12

@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... – Bartezz Dec 02 '15 at 06:45
@Bartezz I've read lots. [It was created at Iowa State University](https://en.wikipedia.org/wiki/Atanasoff%E2%80%93Berry_computer). 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. – mbomb007 Dec 02 '15 at 14:53
3

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 – matto0 May 13 '16 at 00:16
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 – theking2 Jul 06 '22 at 18:45

score 30 · Accepted Answer · edited Oct 06 '15 at 22:38

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 06 '15 at 22:38

jordan

9,570
9
43
78

answered Nov 21 '11 at 11:28

wormhit

3,687
37
46

1

FYI - the above regex doesnt actually prevent the likes of 10.000 - it should really shorten it to 10.00 but it doesnt. – Sk446 Dec 05 '12 at 10:20
2

If you would also like to capture non-decimal values use this: `^\d+((\.|\,)\d{2})?$` – Wojciech Owczarczyk Aug 07 '15 at 09:13

score 6 · Answer 3 · answered Nov 08 '12 at 14:06

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

Toto · Answer 4 · 2011-05-11T12:22:26.160

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 '11 at 12:22

answered May 11 '11 at 11:10

Toto

89,455
62
89
125

1

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}$ – Justin Jun 12 '15 at 16:10

score 2 · Answer 5 · answered Apr 21 '13 at 08:03

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

husmen73 · Answer 6 · 2016-09-23T14:38:57.120

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 '16 at 14:38

answered Jun 30 '15 at 09:37

husmen73

97
1
9

works fine but it is possible to enter the letter 'e' – Lucas Matos Sep 23 '16 at 01:17

score 0 · Answer 7 · answered Jul 14 '22 at 08:37

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 '22 at 08:37

Giovanni Malacaria

21
6

score -1 · Answer 8 · answered Nov 23 '14 at 14:55

-1

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

answered Nov 23 '14 at 14:55

Yesu Raj

314
3
5

HTML5 Form Input Pattern Currency Format

8 Answers8

Linked

Related