Restrict the input characters in textfield / numberfield using regular expression? - regex

Question

I use numberField in ExtJS Form and want to enter only positive numbers, in range of 0-99 and it should accept only 2 characters (and not more than 2).
{
xtype:"textfield",
allowNegative: false,
allowDecimals: false,
minValue: 0,
maxValue: 99,
maxLength: 2
}
gives an error in above code but it is accepting more then 2 characters.
I also tried below but issue is same:
{
xtype:"textfield",
regex: /^\d{0,2}$/,
regexText: "<b>Error</b></br>Invalid Number entered.",
validator: function(v) {
return /^\d{0,2}$/.test(v)?true:"Invalid Number";
}
}
How to restrict to input more then 2 characters?

Answer 1

if you're using version 3, the TextField's maxLength documentation describes using the autoCreate property to state the maximum length (the doc example shows a NumberField but it is also supported by the TextField class):
maxLength : Number Maximum input field length allowed by validation
(defaults to Number.MAX_VALUE). This behavior is intended to provide
instant feedback to the user by improving usability to allow pasting
and editing or overtyping and back tracking. To restrict the maximum
number of characters that can be entered into the field use autoCreate
to add any attributes you want to a field, for example:
var myField =
new Ext.form.NumberField({
id: 'mobile',
anchor:'90%',
fieldLabel: 'Mobile',
maxLength: 16, // for validation
autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete:
'off', maxlength: '10'} });
Using version 4, a TextField has the enforceMaxLength property.
If you're set on using a regex, both versions support the maskRe property, although I don't think this prevents invalid values that are pasted.

Answer 2

Not sure if vtype was there before ExtJS 4.x but this is how you can use vtype.
var validMileRadius = /^([0-9]{1,4})/;
Ext.apply(Ext.form.field.VTypes, {
// vtype validation function
radius: function(val, field) {
return validMileRadius.test(val);
},
radiusText: 'Not a Valid Radius.'
});
{
xtype: 'textfield',
width: 40,
maxLength : 4,
style : {marginLeft:'10px'},
id : 'cityRadius',
enforceMaxLength :4,
vtype : 'radius'
}
Thanks
Punith

Answer 3

FOR EVERYBODY, WHO STUCK ON THE SAME
For ExtJS 4.x You even don't need to create VType. From ExtJS 4.x documentation for Ext.form.field.Number:
enforceMaxLength : Boolean
True to set the maxLength property on the underlying input field. Defaults to false
So, You just have to specify maxLength and set enforceMaxLength to true. According on previous post it might look like this:
{
xtype: 'textfield',
width: 40,
maxLength : 4,,
enforceMaxLength : true
style : {marginLeft:'10px'},
id : 'cityRadius'
}

Answer 4

Just a helper, but to restrict a textfield to allow only numbers you can set the properties of the text field with the attribute "maskRe". It allows you to create masks with regular expressions. Here is a mask that allows you to enter only the numbers:
{
xtype: 'textfield',
fieldLabel: 'Text Field(numbers-only)',
enforceMaxLength:true, //Restrict typing past maxLength: n
maxLength: 8, //Set max length validation
maskRe:/[0-9.]/ //Allow only numbers
},

Answer 5

maxLength: 2,
enforceMaxLength: true,

Answer 6

For dynamically setting the maxLength, I came up with this override:
Ext.override(Ext.form.field.Number, {
/**
* Setter: this method will set the maxLength variable on our NumberField
* class, and on its actual dom element, so we can actually restrict the user
* from entering over the maxLength
* #param {Number} maxLength
*/
setMaxLength: function(maxLength) {
this.maxLength = maxLength;
var inputEl = this.inputEl;
if (inputEl) {
var domEl = inputEl.dom;
if (domEl) {
domEl.maxLength = maxLength;
}
}
},
/**
* Shortcut method for setting the maxLength based on the maxValue... if
* maxValue is not set, then 0 is used, which means the maxLength will be 1
*/
setMaxLengthFromMaxValue: function() {
var maxValue = this.maxValue || 0;
if (maxValue >= 0) {
this.setMaxLength(maxValue.toString().length);
}
}
});

Answer 7

Its very simple use maskre config to restrict textfield.
if will allows you to enter just numbers & alphabets.
xtype: 'textfield',
fieldLabel: 'Text Field(numbers-only)',
enforceMaxLength:true,
maxLength: 8,
maskRe: /[A-Za-z0-9]/