Login form - validation form

  1. #1

    Login form - validation form

    Greetings, I have one question, I have login form with "ClientValidation" listener, but I have a trouble with this.

    This is my code on login page:

    <ext:ResourceManager runat="server" />
        <ext:KeyMap runat="server" Target="Ext.getBody()">
            <ext:KeyBinding>
                <keys>
                    <ext:Key Code="ENTER" />
                </keys>
                <listeners>
                    <Event Handler="if(#{LoginFormPanel}.getForm().isValid()){#{btnLogin}.fireEvent('click');}" />
                </listeners>
            </ext:KeyBinding>
        </ext:KeyMap>
        <form id="LoginForm" runat="server">
        <div>
            <ext:Window ID="LoginWindow" runat="server" Closable="false" Resizable="false" Height="150"
                Icon="Lock" Title="Login" Draggable="true" Width="300" Modal="true" Layout="fit"
                BodyBorder="true" Padding="5">
                <items>
                    <ext:FormPanel runat="server" Border="false" ID="LoginFormPanel" Layout="form" BodyBorder="false"
                        BodyStyle="background:transparent;" MonitorValid="false" MonitorPoll="500">
                        <Items>
                            <ext:TextField ID="username" runat="server" FieldLabel="Username" AllowBlank="false"
                                BlankText="Username is required." AnchorHorizontal="100%" EmptyText="Enter your username" ValidateOnBlur="true" CausesValidation="true"/>
                            <ext:TextField ID="password" runat="server" InputType="Password" FieldLabel="Password"
                                AllowBlank="false" BlankText="Password is required." EmptyText="Enter your password" AnchorHorizontal="100%"  ValidateOnBlur="true" CausesValidation="true"/>
                            <ext:Container Layout="column" runat="server" Height="25" AnchorHorizontal="100%">
                                <Items>
                                    <ext:BoxComponent Width="105" runat="server" />
                                    <ext:Checkbox runat="server" ID="rememberMeCheckbox" />
                                    <ext:Label runat="server" FieldLabel="Remember Me" LabelSeparator=" " />
                                </Items>
                            </ext:Container>
                        </Items>
                        <Listeners>
                            <ClientValidation Handler="#{btnLogin}.setDisabled(!#{LoginFormPanel}.getForm().isValid())" />
                        </Listeners>
                    </ext:FormPanel>
                </items>
                <buttons>
                    <ext:Button ID="btnLogin" runat="server" Text="Login" Icon="Accept" Disabled="true">
                        <Listeners>
                            <Click Handler="Login.ValidateLogin({ failure: function (msg) {
                             #{LoginFormPanel}.getForm().reset();
                             Ext.Msg.alert('Failure', msg); 
                             } });" />
                        </Listeners>
                    </ext:Button>
                </buttons>
            </ext:Window>
        </div>
        </form>
    If I enter some text in text fields and press enter button, everything is fine, but I want to enable button "btnLogin" when form is valid (when text is entered in both text fields), how can I do that, how can I trigger this listener?

    Best regards.

    ===================

    I figure it out why my button is disabled, I need to set monitor valid to "true"
    MonitorValid="true"
    but now the question is how to avoid to have text fields marked red at startup after form is displayed?
    Last edited by LordMX; Aug 14, 2011 at 12:03 PM. Reason: Almoust solved

Similar Threads

  1. [CLOSED] V2.0 Validation Form Help
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 14, 2012, 2:55 PM
  2. form validation problem
    By ozayExt in forum 1.x Help
    Replies: 1
    Last Post: Oct 27, 2011, 7:05 AM
  3. [CLOSED] validation form all
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 22, 2011, 8:05 PM
  4. [CLOSED] Form Validation within template of a asp:login control
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 27, 2009, 12:15 PM
  5. [CLOSED] enter key in login form
    By alexp in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 16, 2009, 8:56 AM

Posting Permissions