Regex is showing phone number as valid for 9 & 10 total digits when it should show valid for 10 digits only

Question

I am using this to validate the phone number.....It shouldbe of 10 digits and once its of 10 digits, remove the red squiggly line and format it in (xxx)xxx-xxxx in this pattern. But, according to this validation, when I am finished writing 9 digits, it shows the number as valid number and removes the red squiggly line and then when I write the 10th digit, it formats in the above pattern.

// custom Vtype for vtype:'phone'
// Vtype for phone number validation
Ext.apply(Ext.form.VTypes, { 
    'phoneText': i18n.validation.phonetext, 
    'phoneMask': /[\-\+0-9\(\)\s\.Ext]/, 
    'phoneRe': /^(\({1}[0-9]{3}\){1}\s{1})([0-9]{3}[-]{1}[0-9]{4})$|^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9]{3,4}){3}$|^Ext. [0-9]+$/, 
    'phone': function (v) {
        return this.phoneRe.test(v); 
    }
});

// Function to format a phone number
Ext.apply(Ext.util.Format, {
    phoneNumber: function(value) {
        var phoneNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/[^0-9]/g, '');

        if (phoneNumber != '' && phoneNumber.length == 10) {
            return '(' + phoneNumber.substr(0, 3) + ') ' + phoneNumber.substr(3, 3) + '-' + phoneNumber.substr(6, 4);
        } else {
            return value;
        }
    }
});

Ext.namespace('Ext.ux.plugin');

// Plugin to format a phone number on value change
Ext.ux.plugin.FormatPhoneNumber = Ext.extend(Ext.form.TextField, {
    init: function(c) {
        debugger;
        c.on('change', this.onChange, this);
    },
    onChange: function(c) {
        debugger;
        c.setValue(Ext.util.Format.phoneNumber(c.getValue()));
    }});



          this.phone = {
                xtype: 'textfield',
                country: Bedbath.registry.params.country,
                labelSeparator: "",
                fieldLabel: i18n.label.phone+": <span style='color:red'>*</span>",
                name: "phone1RE",
                ref: 'phone1RE',
                id: 'phone1RE',
                allowBlank: false,
                vtype:'phone',
                plugins: new Ext.ux.plugin.FormatPhoneNumber()
            };

I dont know how its showing it as valid for 9 digits? Can someone help me out? Thank you.

Answer 1

Your middle option allows for 9 digits.

^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9]{3,4}){3}$

everything is optional except the last part, which can be 3-4 numbers repeated 4 times (this is 9-12 digits)

If you want to make sure it's 10 characters and you are using US type numbers (which it appears you are), then this would work to make 10 numbers with a possible space between the correct spots, you could change the last part to something like:

((?: ?[0-9]{3}){2} ?[0-9]{4})

In total it would be like this:

^(\({1}[0-9]{3}\){1}\s{1})([0-9]{3}[-]{1}[0-9]{4})$|^(((\+44)? ?(\(0\))? ?)|(0))((?: ?[0-9]{3}){2} ?[0-9]{4})$|^Ext. [0-9]+$

Debuggex Demo