1

I am trying to figure out a pattern for html and I can't get it to work...

As the result I am looking for something lower than this number: "12.50"

<input type='text' class='form-control' name='wrap' id='wrap' placeholder='0.00' pattern='^([1-9]|1[012]+[.]+[0-5]+[0])$' required>

I am expecting the first number to be a number between 0-12, after that the "." and after that a number between 0-5 and at the end just the 0.

It works if I only have the 0-12 regex, but when I add the pattern for the period and the rest, it brakes and is not working.

user6363467
  • 124
  • 1
  • 10

2 Answers2

2

Your grouping and use of quantifiers are not correct. Besides, ^ and $ are redundant in HTML5 pattern regex as these patterns are enclosed with ^(?: and )$ automatically upon compiling.

You may use a more precise pattern like

pattern='(?:[1-9]|1[012])\.[0-5]0'

It will get compiled as /^(?:(?:[1-9]|1[012])\.[0-5]0)$/ (or with u modifier in Firefix and Chrome) and it will match:

  • ^ - start of string
  • (?: - start of a non-capturing outer group
    • (?:[1-9]|1[012]) - a non-capturing group matching numbers from 1 t to 12
    • \. - a dot
    • [0-5]0 - a digit from 0 to 5 and then a zero
  • )$ - end of outer grouping and end of string.

See the regex demo and Regulex graph:

enter image description here

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
1

Ok I got it working, I didn't know that the "|" means OR so I had to tweak my code a little bit.

  <input type='text' class='form-control' name='wrap' id='wrap' placeholder='0.00' pattern='^([0-9][.][0-5][0]|1[012][.][0-5][0])$' required>

so I had before ^([1-9]|1[012]+[.]+[0-5]+[0])$

If I split it up I get:

[1-9]

AND

1[012]+[.]+[0-5]+[0]

What I actually needed was to add the +[.]+[0-5]+[0] to both patterns

user6363467
  • 124
  • 1
  • 10