Aug 14, 2011, 11:44 AM
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:
Best regards.
===================
I figure it out why my button is disabled, I need to set monitor valid to "true"
but now the question is how to avoid to have text fields marked red at startup after form is displayed?
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"
Last edited by LordMX; Aug 14, 2011 at 12:03 PM.
Reason: Almoust solved