CODEWITHSUNDEEP
regexvalidationextjs
Ashwin Parmar
Ashwin Parmar

Reputation: 3045

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

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?

Upvotes: 18

Views: 66352

Answers (7)

Dr. Piyush Dholariya
Dr. Piyush Dholariya

Reputation: 1346

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]/

Upvotes: 0

incutonez
incutonez

Reputation: 3331

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);
    }
  }
});

Upvotes: 0

Joabe Lucena
Joabe Lucena

Reputation: 812

maxLength: 2,
enforceMaxLength: true,

Upvotes: 0

Tyler Rafferty
Tyler Rafferty

Reputation: 3428

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
},

Upvotes: 2

dr_leevsey
dr_leevsey

Reputation: 385

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'                
}

Upvotes: 4

Punith Raj
Punith Raj

Reputation: 2195

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

Upvotes: 7

user69820
user69820

Reputation:

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.

Upvotes: 15

Related Questions