CODEWITHSUNDEEP
javascriptregexextjsextjs4.2
Abdul Rehman Yawar Khan
Abdul Rehman Yawar Khan

Reputation: 1087

Regular Expression for European Currency Input in ExtJS 4.2

I have a textfield in which user will enter the price value. I have to take input as 0,00 (No decimal only one comma for the value of cents). So User can enter following

So I wrote this RegExp: ^\d+(,\d{0,2})?$ and tested it on regexpal.com for the above test cases and it verified all of them.

Now when I am using this in my code as 

xtype:'textfield',
fieldLabel: 'Tiefbau(informativ)',
maskRe: /^\d+(,\d{0,2})?$/

And try to enter value 123,12, it doesn't allow me to enter comma because I found that Textfield compare each individual character with the "maskRe" expression.

I want "One Or No Comma" and "No Decimal Point" Can anyone tell me a solution for this or point out my mistake?

Upvotes: 1

Views: 676

Answers (3)

Abdul Rehman Yawar Khan
Abdul Rehman Yawar Khan

Reputation: 1087

Answer which I have accepted is perfect. Another solution which I made was to listen to change event of the textfield and doing this: 

change: function(thiss, newValue, oldValue, eOpts ){

    var regX = (/^(\d+(,\d{0,2})?$)/gm).test(newValue);

    if(regX == false ){

      if(newValue == "")
        thiss.setValue("");
      else
        thiss.setValue(oldValue);   
    }
}

It will allow user to enter anything but if user's new value is not according to RegExp than it will replace the new value with the old Known value.

Upvotes: 0

And-y
And-y

Reputation: 1524

Why not use the numberfield component which derives of textfield? It is a specialised input field for numbers which allow only numeric input to be entered.

When you look in the documentation you will see that it solves your problem with the comma instead of dot with the decimalSeparator config.

With the minValue and decimalPrecision config you should have an input field which fits your needs.

{
    xtype: 'numberfield',
    fieldLabel: 'Tiefbau(informativ)',

    decimalSeparator: ',',   // use comma instead of dot
    minValue: 0,             // prevents negative numbers
    decimalPrecision: 2,     // maximum precision to display after the decimal separator
    allowExponential: false, // disallow exponential values ([e+-] chars not typable)

    // Remove spinner buttons, and arrow key and mouse wheel listeners
    hideTrigger: true,
    keyNavEnabled: false,
    mouseWheelEnabled: false
}

See the fiddle.

Upvotes: 1

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 626961

You can use the ? quantifier with the comma:

/^\d+,?\d{0,2}$/

See the regex demo

The regex matches:

  • ^ - start of string
  • \d+ - 1 or more digits
  • ,? - one or zero commas
  • \d{0,2} - zero, one or two digits
  • $ - end of string

Use it like this, e.g.: 

Ext.create('Ext.form.Panel', {
    renderTo: document.body,
    title: 'User Form',
    height: 75,
    width: 300,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [
        {
           xtype:'textfield',
           name: 'name',
           fieldLabel: 'Tiefbau(informativ)',
           validator: function (val) {
               var tr = /^\d+,?\d{0,2}$/.test(val),
                 errMsg = "Must be a valid number";
               return tr ? true : errMsg;
           }
        }
    ]
});

Upvotes: 1

Related Questions