[CLOSED] InputMask pattern question

[vadym.f]

Hi,

I'm trying to come up with the right input mask for the Postal Code field. The basic format should be "A9A 9A9" allowing characters in place of "A" and numbers in place of "9". However, that doesn't work properly. Could you suggest what's wrong here or provide an example link?

                                        <ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true"
                                            ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270">
                                            <Plugins>
                                                <ux:InputTextMask ID="InputTextMask1" runat="server" ClearWhenInvalid="true"
                                                    ValidateRequestMode="Disabled" Visible="true" Mask="A9A 9A9">
                                                </ux:InputTextMask>
                                            </Plugins>
                                        </ext:TextField>

[vadym.f]

OK, I think I figured out the mask that I require to weed out invalid Canadian postal codes. However, there's now a problem with the literal "X" inside the allowed characters sequence. It's not handled correctly by the InputTextMask constructor so I believe the constructor has to be overridden to fix the issue. Can you please suggest how to do the override properly? Or, if this can be done somehow without overriding. The following doesn't work:

                                        <ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true"
                                            ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270">
                                            <Plugins>
                                                <ux:InputTextMask ID="InputTextMaskPostalCode1" runat="server" ClearWhenInvalid="true"
                                                    ValidateRequestMode="Disabled" Visible="true" Mask="X[ABCEGHJKLMNPRSTVXY]X9X[A-Z]X 9X[A-Z]X9">
                                                </ux:InputTextMask>
                                            </Plugins>
                                        </ext:TextField>

        
        Ext.override(Ext.ux.netbox.InputTextMask, {
            constructor:
            function (config) {
                Ext.apply(this, config);

                var mask = config.mask;
                var clearWhenInvalid = config.clearWhenInvalid;
                if (clearWhenInvalid === undefined) {
                    this.clearWhenInvalid = true;
                } else {
                    this.clearWhenInvalid = clearWhenInvalid;
                }
                this.rawMask = mask;
                this.viewMask = '';
                this.maskArray = [];
                var mai = 0;
                var regexp = '';
                for (var i = 0; i < mask.length; i++) {
                    if (regexp) {
                        if (regexp == 'X') {
                            regexp = '';
                        }
                        if (mask.charAt(i) == 'X') {
                            this.maskArray[mai] = regexp;
                            mai++;
                            regexp = '';
                        } else {
                            regexp += mask.charAt(i);
                        }
                    } else if (mask.charAt(i) == 'X') {
                        regexp += 'X';
                        this.viewMask += '_';
                    } else if (mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
                        this.viewMask += '_';
                        this.maskArray[mai] = mask.charAt(i);
                        mai++;
                    } else {
                        this.viewMask += mask.charAt(i);
                        this.maskArray[mai] = RegExp.escape(mask.charAt(i));
                        mai++;
                    }
                }

                this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g, '');
            }
        });

[vadym.f]

I found an ugly way to override the Ext.ux.netbox.InputTextMask constructor function. The backslash character in the Regex pattern signifies that the next literal in the sequence ("X") is not a regex token, i.e. it should be treated as a regular character. The solution isn't robust at all but it does handle my requirement passably. I wonder if anything better could be in the cards.

<script>
        Ext.namespace('Ext.ux.netbox');
        Ext.ux.netbox.InputTextMask.InputTextMaskExtend = Ext.extend(Object, {
            constructor:
            function (config) {
                Ext.apply(this, config);

                var mask = config.mask;
                var clearWhenInvalid = config.clearWhenInvalid;
                if (clearWhenInvalid === undefined) {
                    this.clearWhenInvalid = true;
                } else {
                    this.clearWhenInvalid = clearWhenInvalid;
                }
                this.rawMask = mask;
                this.viewMask = '';
                this.maskArray = [];
                var mai = 0;
                var regexp = '';
                for (var i = 0; i < mask.length; i++) {
                    if (regexp) {
                        if (regexp == 'X') {
                            regexp = '';
                        }
                        if (mask.charAt(i) == 'X' && mask.charAt(i-1) != '\\') {
                            this.maskArray[mai] = regexp;
                            mai++;
                            regexp = '';
                        }
                        else if (mask.charAt(i) != '\\') {
                            regexp += mask.charAt(i);
                        }
                    }
                    else if (mask.charAt(i) == '\\') {
                        continue;
                    }
                    else if (mask.charAt(i) == 'X' && mask.charAt(i - 1) == '\\') {
                        this.viewMask += mask.charAt(i);
                        this.maskArray[mai] = RegExp.escape(mask.charAt(i));
                        mai++;
                    }
                    else if (mask.charAt(i) == 'X' && mask.charAt(i - 1) != '\\') {
                        regexp += 'X';
                        this.viewMask += '_';
                    } else if (mask.charAt(i) == '9' || mask.charAt(i) == 'L' || mask.charAt(i) == 'l' || mask.charAt(i) == 'A') {
                        this.viewMask += '_';
                        this.maskArray[mai] = mask.charAt(i);
                        mai++;
                    } else {
                        this.viewMask += mask.charAt(i);
                        this.maskArray[mai] = RegExp.escape(mask.charAt(i));
                        mai++;
                    }
                }

                this.specialChars = this.viewMask.replace(/(L|l|9|A|_|X)/g, '');
            }
        });

        Ext.ux.netbox.InputTextMask.InputTextMaskExtend.prototype = Ext.ux.netbox.InputTextMask.prototype;
        Ext.reg('Ext.ux.netbox.InputTextMask.InputTextMaskExtend', Ext.ux.netbox.InputTextMask.InputTextMaskExtend);
</script>

                                        
<ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true"
                                            ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270">
                                            <%--                                            <Plugins>
                                                <ux:InputTextMask ID="InputTextMaskPostalCode1" runat="server" ClearWhenInvalid="true"
                                                    ValidateRequestMode="Disabled" Visible="true" Mask="X[ABCEGHJKLMNPRSTVXY]X9X[A-Z]X 9X[A-Z]X9">
                                                </ux:InputTextMask>
                                            </Plugins>--%>
                                            <Plugins>
                                                <ext:GenericPlugin runat="server" InstanceName="Ext.ux.netbox.InputTextMask.InputTextMaskExtend" Mask="X[ABCEGHJKLMNPRSTV\XY]X9X[A-Z]X 9X[A-Z]X9" ID="InputTextMaskExtend1" />
                                            </Plugins>
                                        </ext:TextField>

[Baidaly]

Hello!

The basic format should be "A9A 9A9" allowing characters in place of "A" and numbers in place of "9".

According to this: http://en.wikipedia.org/wiki/Postal_codes_in_Canada , I have tried the following and it works:

<ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true"
	ValidateOnEvent="true" EnableKeyEvents="true" AllowBlank="false" Width="270">
	<Plugins>
		<ux:InputTextMask ID="InputTextMask1" runat="server" ClearWhenInvalid="true"
			ValidateRequestMode="Disabled" Visible="true" Mask="L9L 9L9">
		</ux:InputTextMask>
	</Plugins>
</ext:TextField>

What exactly not working in your case?

[vadym.f]

Thanks Daulet,

My mistake was to use the literal "A" instead of "L" for character input only. Your mask works well except that it allows any character from A to Z for the Canadian postal districts (the first literal in the Postal Code) and currently only 18 are allowed (ABCEGHJKLMNPRSTVXY). Hence I was trying to come up with a regular expression like "X[ABCEGHJKLMNPRSTV\XY]X9X[A-Z]X 9X[A-Z]X9", which would require extending the Ext.ux.netbox.InputTextMask class. You may mark this thread as closed.

[RCN]

Let me know if the following example helps you:

<ext:TextField ID="TextPostalCode" runat="server" SelectOnFocus="true" ValidateOnEvent="true"
    EnableKeyEvents="true" AllowBlank="false" Width="270">
    <Plugins>
        <ext:InputMask Mask="A9A 9A9">
            <MaskSymbols>
                <ext:MaskSymbol Name="9" Regex="[0-9]" />
                <ext:MaskSymbol Name="A" Regex="[a-zA-Z]" />
            </MaskSymbols>
        </ext:InputMask>
    </Plugins>
</ext:TextField>

[vadym.f]

Thanks for the suggestion Raphael!

I'm afraid the ext:InputMask plugin is unavailable in v1.6 I'm using.

[RCN]

Sorry @Vadym.f, I thought it was the 2.x forum