[CLOSED] Formpanel / Validation / Change a valid combobox selection / still invalid

  1. #1

    [CLOSED] Formpanel / Validation / Change a valid combobox selection / still invalid

    Hello

    I tried to search for a solution for this on the forum but wasn't really successful. Perhaps I tried the wrong words... Sorry if it is a double.

    When I am editing a formpanel that is already valid the "save button" is grayed out when I load it initially. That is ok for me because there is no use in saving when I didn't change anything. If I change now a selection of a dropdown box the form stays invalid even though in my opinion it should be valid now and I should be able to save it. How can I change this? I don't want to have a listener on every combobox to check the validation....

    Thank you for giving me a clue in the right direction.

    best regards

    example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        private object TestData
        {
            get
            {
                return new object[]
                {
                    new object[] { "AL", "Alabama", "The Heart of Dixie" },
                    new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                    new object[] { "AZ", "Arizona", "The Grand Canyon State" },
                    new object[] { "AR", "Arkansas", "The Natural State" },
                    new object[] { "CA", "California", "The Golden State" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>FormPanel Validation - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style>
            .icon-exclamation {
                padding-left: 25px !important;
                background: url(/icons/exclamation-png/ext.axd) no-repeat 3px 0px !important;
            }
    
            .icon-accept {
                padding-left: 25px !important;
                background: url(/icons/accept-png/ext.axd) no-repeat 3px 0px !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel
                runat="server"
                Layout="FitLayout"
                Width="600"
                Height="250">
                <Items>
                    <ext:FormPanel
                        ID="FormPanel1"
                        runat="server"
                        Title="FormPanel Validation (all fields required)"
                        BodyPadding="5"
                        ButtonAlign="Right"
                        Layout="Column">
                        <Items>
                            <ext:Panel
                                runat="server"
                                Border="false"
                                Header="false"
                                ColumnWidth=".5"
                                Layout="Form"
                                LabelAlign="Top">
                                <Defaults>
                                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                    <ext:Parameter Name="MsgTarget" Value="side" />
                                </Defaults>
                                <Items>
                                    <ext:ComboBox
                                        runat="server"
                                        FieldLabel="Select a single state"
                                        DisplayField="name"
                                        Width="320"
                                        LabelWidth="130"
                                        QueryMode="Local"
                                        TypeAhead="true">
                                        <Store>
                                            <ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
                                                <Model>
                                                    <ext:Model runat="server">
                                                        <Fields>
                                                            <ext:ModelField Name="abbr" />
                                                            <ext:ModelField Name="name" />
                                                            <ext:ModelField Name="slogan" />
                                                        </Fields>
                                                    </ext:Model>
                                                </Model>
                                                <Reader>
                                                    <ext:ArrayReader />
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <SelectedItems>
                                            <ext:ListItem Text="Alaska"></ext:ListItem>
                                        </SelectedItems>
                                    </ext:ComboBox>
                                </Items>
                            </ext:Panel>
                        </Items>
                        <BottomBar>
                            <ext:StatusBar runat="server" />
                        </BottomBar>
                        <Listeners>
                            <ValidityChange Handler="this.dockedItems.get(1).setStatus({
                                                         text : valid ? 'Form is valid' : 'Form is invalid',
                                                         iconCls: valid ? 'icon-accept' : 'icon-exclamation'
                                                     });
                                                     #{Button1}.setDisabled(!valid);" />
                        </Listeners>
                    </ext:FormPanel>
                </Items>
                <Buttons>
                    <ext:Button
                        ID="Button1"
                        runat="server"
                        Text="Save"
                        Disabled="true"
                        FormBind="true">
                        <Listeners>
                            <Click Handler="if (#{FormPanel1}.getForm().isValid()) {Ext.Msg.alert('Submit', 'Saved!');}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: 'FormPanel is incorrect', buttons:Ext.Msg.OK});}" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Text="Cancel" />
                </Buttons>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Jul 20, 2018 at 9:26 PM.
  2. #2
    Hello @tMp!

    Thanks for the question! I am not seeing any actual validation code tied to the combo box. When the page loads, the combo is valid, thus the form also valid. So when you change the value on the combo box there's no validity change at all, and that's why the event never fires.

    The "save" button is disabled because you explicitly, and statically specified it should be disable at startup. It should be enough to leave it enabled/default, and let the validityChange disable it for you whenever the form is invalid (your validity change handler seems right).

    For what I understand, what you want is the 'save' button to be disabled until any of the fields are changed, right? So that it does not allow "saving what's already saved".

    No matter how I think about it, I can't think a way without having some kind of custom validation which ultimately means one way or another, a "listener" tied to the fields. For example, if you have a text field and a combo box, the form should remember the values at load time, so that it can compare them with the current values on the forms, and only allow not only when each individual field isValid() but also if at least one of them differ from its initial value.

    That said, I believe your solution lies around a custom VType. See this example: Form > Validation Custom VType. It shows how one field can interact with the other thru validation; in a similar way it can validate a group of fields against their value being the initial ones. You might need to "save" the values somewhere at the point the form becomes fully rendered, or initial data fully fed to the page.

    This discussion about VTypes may add you insight on how all that works: Validation and VTypes - how does it all work?. It points at some documentation from Sencha's Ext JS that might be just useful.

    Sorry for the long reply, I hope it helps you get it working. If I got it the wrong idea, please share your thoughts.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio,

    Thank you very much for your answer. No, you are dead right with your idea ;) Unfortunately, my assumption was correct. I was hoping I missed some easy way out. Thanks for all the further information and links! As a quick fix, I will enable the save button at start. For the long haul I will go with the explicit listener...

    best regards
  4. #4
    Glad it helped, thanks for your feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] FormPanel remains valid when combobox has no records
    By wisdomchuck in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 03, 2013, 8:28 PM
  2. Valid and Invalid Listeners of GridPanel
    By yash.kapoor in forum 2.x Help
    Replies: 2
    Last Post: Dec 06, 2012, 4:48 AM
  3. Replies: 1
    Last Post: Dec 04, 2012, 5:45 AM
  4. Replies: 9
    Last Post: Aug 03, 2012, 8:36 AM
  5. Help, FormPanel Validation Invalid
    By diego in forum 1.x Help
    Replies: 0
    Last Post: Jan 21, 2010, 11:23 AM

Posting Permissions