Material Design Lite plugin regex javascript

Question

I'm working on form based on material-design-lite plugin. Link below: https://getmdl.io/components/index.html#textfields-section

I have a problem with form validation, especially with regular expression.

There is my simple form:

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
    <label class="mdl-textfield__label" for="sample4">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

I would like to have such validation patterns:

Input amount is not a string (only number 0-9)
Separator must be ","
I need max 2 decimal places
I can't accept any characters, except of numbers 0-9 and ","
Input amount cannot be less than 0
Input amount has to start from a number

Could you please help me with these regular expressions? I don't have enough knowledge about it, just need ready patterns. Rest of validation I'm going to do via javascript.

Thank you!

Nope Nope · Accepted Answer · 2018-03-07 12:18:59Z

1

^(?:[1-9][0-9]*?,?[0-9]{0,2}|[0](?:,[0-9]{0,2})?|)$

This seems to match all of the criteria you have provided, you can test it with this DEMO

It consists of 3 "parts" separated by |s essentialy testing for 3 different matches

[1-9][0-9]*?,?[0-9]{0,2} - Matches if the input is a number starting from 1-9 followed by an amount (or lack) of numbers from 0-9 followed then by an optional ,+ 0-2 numbers from 0-9
[0](?:,[0-9]{0,2})? - Matches if the input is 0 followed by an optional , and 0-2 numbers from 0-9
(The lack of anything between the | and the )$ at the end) - Matches if the input is empty

EDIT: Here is a version which doesn't allow the last character to be a , https://regex101.com/r/dPM95O/4

edited Mar 7, 2018 at 12:18

answered Mar 7, 2018 at 11:34

Nope Nope

759 bronze badges

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

8 Comments

Nitin Dhomse Over a year ago

What about the max 2 decimal places?

bigmeister Over a year ago

Thank you, it's great solution! And what about such situation when comma is the last character? For example: "12,"?

Nitin Dhomse Over a year ago

@bigmeister : this doesn't solve your all conditions.

Nope Nope Over a year ago

@NitinDhomse If you read the conditions it says, and I quote, "Input amount cannot be less than 0", which is technically saying it can be 0

Nitin Dhomse Over a year ago

@bigmeister : Decimal places means maximum digits accepted after decimal point (.), if you want amount max 2 digits then this is fine!

|

Collectives™ on Stack Overflow

Material Design Lite plugin regex javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related