How to restrict ExtJs Textfield to accept only numbers using maskRe . (Should accept Positive , Negative , integer and decimal numbers.)

Question

I need to configure my ExtJs textfield to accept only numbers which can be positive , negative , integer and decimals upto 2 decimals . I tried with maskeRe and regular expression /^-?[0-9]\d*(\.\d+)?$/ . But its accepting only positive integers. User should not be able to type restricted characters. Also it should accept '-' only at first place and '.' in between and only once.

So it should accept : 10, -10, 10.12, -10.34 etc

Link to my fiddle

Thanks

Solution 1

Change your maskRe to

maskRe: /[0-9.-]/,
validator: function(v) {
    return /^-?[0-9]*(\.[0-9]{1,2})?$/.test(v)? true : 'Only positive/negative float (x.yy)/int formats allowed!';
},

The point is that you allow some chars using maskRe (not the value itself) and validate the string input within the validator.

Pattern details:

• ^ - start of string
• -? - an optional hyphen
• [0-9]* - zero or more digits
• (\.[0-9]{1,2})? - an optional sequence of
  • \. - a dot
  • [0-9]{1,2} - any 1 or 2 digits
• $ - end of string.

Update

You may enforce to revert to a previous value if the input value is not matching the regex. See the full snippet below:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'maskRe',
            width: 600,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Enter Postive or Negative integer or decimal No.',
                width : 600,
                labelWidth : 300,
                anchor: '100%',
                maskRe: /[0-9.-]/,
                validator: function(v) {
                    return /^-?[0-9]*(\.[0-9]{1,2})?$/.test(v)? true : 'Only positive/negative float (x.yy)/int formats allowed!';
                },
                listeners: {
                    change: function(e, text, prev) {
                        if (!/^-?[0-9]*(\.[0-9]{0,2})?$/.test(text)) 
                        {   
                            this.setValue(prev);
                        }
                    }
                }
            }],
        });
    }
});

The change event is added to the field listeners and if the value does not match /^-?[0-9]*(\.[0-9]{0,2})?$/ regex (similar to the validation regex, but allows a dot without a digit right after to allow further input), the value is reverted with this.setValue(prev).

Solution 2

you can use this property xtype: 'numberfield', it will accept all type of number. For decimal value, we can use decimalPrecision:2.

Try It, if a code will not work then please provide me your code. So that I can suggest you the best solution.

All the best :)

Solution 3

He left this way of doing it, in case someone is doing it this way they can serve

Only Letters:

<ext:TextField ID="tfname" FieldLabel="Name" MaskRe="([a-zA-Z])" runat="server" >
</ext:TextField>

Only Numbers:

<ext:TextField ID="tfnumber" FieldLabel="Number" MaskRe="([0-9])" runat="server" >
</ext:TextField>

accept all previous:

<ext:TextField ID="tfname" FieldLabel="Name" MaskRe="([a-zA-Z0-9])" runat="server" >
</ext:TextField>

Comments

[Harshal]

Thanks @Wiktor , this works. But my requirement is user should not be able to type restricted character instead of showing error message .

[Harshal]

Also it should accept '-' only at first place and '.' in between and only once. Edited my question . Sorry for incomplete requirement.

[Sartheris Stormhammer]

what if I don't want the textfield to accept the characters AT ALL, instead of showing and error under?

[Wiktor Stribiżew]

@SartherisStormhammer See my update. Note you will still be able to input the "wrong" chars but the value will get reverted to the previous one anyway.

[FrenkyB]

This should be accepted answer. Thanks a lot.