What's New?

[OPEN] [#1193] [3.2.1] DateField vs InputMask

  1. #1
    Dec 14, 2015, 4:41 PM

    [OPEN] [#1193] [3.2.1] DateField vs InputMask

    On the following example, press Validate Form button. The field is marked as invalid, but field's AllowBlank is set to true.

    In my opinion, field shoud not be marked as invalid when unmasked value retuns null and field's AllowBlank is set to true.

    thanks in advance.

    Click image for larger version.  Name: im001.png  Views: 35  Size: 2.9 KB  ID: 24360

    <!DOCTYPE html>
<html>
<head runat="server">
</head>
<body>
    <ext:ResourceManager ScriptMode="Debug" Locale="en-US" Theme="Crisp" runat="server" />
    <ext:FormPanel Margin="10" ID="_frm" Title="Form" DefaultAnchor="100%" Width="300" Height="150" Border="true" runat="server">
        <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
        <Items>
            <ext:DateField FieldLabel="Custom Date" AllowBlank="true" runat="server">
                <Plugins>
                    <ext:InputMask Mask="dt/mn/yzzz" InvalidMaskText="The value doesn't match the mask" runat="server">
                        <MaskSymbols>
                            <ext:MaskSymbol Name="d" Regex="[0123]" />
                            <ext:MaskSymbol Name="t" Regex="[0-9]" />
                            <ext:MaskSymbol Name="m" Regex="[01]" />
                            <ext:MaskSymbol Name="n" Regex="[0-9]" />
                            <ext:MaskSymbol Name="y" Regex="[12]" />
                            <ext:MaskSymbol Name="z" Regex="[0-9]" />
                        </MaskSymbols>
                    </ext:InputMask>
                </Plugins>
            </ext:DateField>
        </Items>
        <Buttons>
            <ext:Button Text="Validate Form" runat="server">
                <Listeners>
                    <Click Handler="#{_frm}.isValid();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
</body>
</html>
    Last edited by Daniil; Dec 19, 2015 at 11:26 AM. Reason: [OPEN] [#1193] [3.2.1]
  2. #2
    Dec 14, 2015, 4:58 PM
    In my opinion, field shoud not be marked as invalid when unmasked value retuns null and field's AllowBlank is set to true.
    It's possible to overcome the issue by overriding Ext.form.field.Base's isValid method, as shown below:
    <!DOCTYPE html>
<html>
<head runat="server">
    <script type="text/javascript">
        Ext.form.field.Date.override({
            isValid: function () {
                var me = this;

                if (me.hidden || me.disabled) {
                    return true;
                }

                if (me.inputMask != null) {
                    if (Ext.isEmpty(me.inputMask.getUnmaskedValue())) {
                        if (me.allowBlank) {
                            me.clearInvalid();
                            return true;
                        }
                    }
                }

                return me.validateValue(me.processRawValue(me.getRawValue()));
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager ScriptMode="Debug" Locale="en-US" Theme="Crisp" runat="server" />
    <ext:FormPanel Margin="10" ID="_frm" Title="Form" DefaultAnchor="100%" Width="300" Height="150" Border="true" runat="server">
        <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
        <Items>
            <ext:DateField FieldLabel="Custom Date" AllowBlank="true" runat="server">
                <Plugins>
                    <ext:InputMask Mask="dt/mn/yzzz" InvalidMaskText="The value doesn't match the mask" runat="server">
                        <MaskSymbols>
                            <ext:MaskSymbol Name="d" Regex="[0123]" />
                            <ext:MaskSymbol Name="t" Regex="[0-9]" />
                            <ext:MaskSymbol Name="m" Regex="[01]" />
                            <ext:MaskSymbol Name="n" Regex="[0-9]" />
                            <ext:MaskSymbol Name="y" Regex="[12]" />
                            <ext:MaskSymbol Name="z" Regex="[0-9]" />
                        </MaskSymbols>
                    </ext:InputMask>
                </Plugins>
            </ext:DateField>
        </Items>
        <Buttons>
            <ext:Button Text="Validate Form" runat="server">
                <Listeners>
                    <Click Handler="#{_frm}.isValid();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
</body>
</html>
    Last edited by RaphaelSaldanha; Dec 17, 2015 at 7:01 PM.
  3. #3
    Dec 19, 2015, 11:26 AM
    Hi Raphael,

    Thank you for the report and a possible solution!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/1193

    Off the top of my head it might be better to override an InputMask's .getErrors() method. Maybe, introducing a new AllowBlank setting (is there a better name?) on the InputMask plugin itself.
  4. #4
    Dec 21, 2015, 11:35 AM
    Off the top of my head it might be better to override an InputMask's .getErrors() method.
    I agree.

    Maybe, introducing a new AllowBlank setting (is there a better name?) on the InputMask plugin itself.
    In my opinion, it's confusing to have 2 properties that defines the same thing (as an example, GridPanel's EmptyText x GridView's EmptyText).
  5. #5
    Dec 21, 2015, 11:45 AM
    Well, it could be another option like ValidateMaskOnBlankValue that could be false by default. Or, maybe, your original suggestion with AllowBlank is the best.
  6. #6
    Dec 22, 2015, 11:01 AM
    Well, it could be another option like ValidateMaskOnBlankValue that could be false by default. Or, maybe, your original suggestion with AllowBlank is the best.
    it's your call :)

Similar Threads

  1. [CLOSED] [#785] [3.2.0] DateField vs InputMask
    By RCN in forum 3.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 14, 2015, 11:12 AM
  2. [CLOSED] [Bug 2.1] Exception using InputMask with DateField or NumberField
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 09, 2015, 11:53 AM
  3. Disabling InputMask using JS
    By joaxazevedo in forum 2.x Help
    Replies: 1
    Last Post: Mar 06, 2013, 3:17 PM
  4. [CLOSED] InputMask
    By sigmasafi in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 28, 2013, 4:08 AM
  5. How to add an InputMask plugin?
    By joaxazevedo in forum 2.x Help
    Replies: 3
    Last Post: Feb 21, 2013, 8:28 PM

Posting Permissions