Oct 11, 2009, 6:05 AM
Blur event and MarkInvalid method
Hi guys, I'm a new Coolite developer, so I hope this post doesn't contain (too many) errors.
I'm trying to develop a form to support user registration with "server-side dynamic" validation, that is a validation on the server, made for each field every time user leaves that field.
I want use this kind of validation to check in real-time if the username specified is not already used.
At the end of this post there's the sample code. As you can see, in the page there's a form with two fields. Each field has a listener on "BLUR" event and calls an AjaxMethod for server side validation.
In short, this is the behavior. If I insert a value in username textfield (except "smith") then:
- click with MOUSE in password textfield, validation works correctly and exclamation icon appears
- press TAB button (password textfield is selected again), exclamation icon appears for a moment, then it disappears. So validation does't work correctly. Note that if I select again username textfield and then password textfield with MOUSE, validation works fine.
Moreover, I've found that sometimes, at the first load of the page (when the instance of the browser is just open), behavior is always ok.
I've tested this script with Chrome 3.0.195.25, Firefox 3.5.3, IE 8.0.6001.18702 and Opera 10.00.1750.
I'm using Coolite 0.8.1.987
I though that problem could be depends on blur/markInvalid couple (because, maybe, markInvalid method sets the focus again on textfield), but why if I use the mouse the behaviour changes?
Are there some errors? Is this approach wrong?
Many thanks!
--
Omar
I'm trying to develop a form to support user registration with "server-side dynamic" validation, that is a validation on the server, made for each field every time user leaves that field.
I want use this kind of validation to check in real-time if the username specified is not already used.
At the end of this post there's the sample code. As you can see, in the page there's a form with two fields. Each field has a listener on "BLUR" event and calls an AjaxMethod for server side validation.
In short, this is the behavior. If I insert a value in username textfield (except "smith") then:
- click with MOUSE in password textfield, validation works correctly and exclamation icon appears
- press TAB button (password textfield is selected again), exclamation icon appears for a moment, then it disappears. So validation does't work correctly. Note that if I select again username textfield and then password textfield with MOUSE, validation works fine.
Moreover, I've found that sometimes, at the first load of the page (when the instance of the browser is just open), behavior is always ok.
I've tested this script with Chrome 3.0.195.25, Firefox 3.5.3, IE 8.0.6001.18702 and Opera 10.00.1750.
I'm using Coolite 0.8.1.987
I though that problem could be depends on blur/markInvalid couple (because, maybe, markInvalid method sets the focus again on textfield), but why if I use the mouse the behaviour changes?
Are there some errors? Is this approach wrong?
Many thanks!
--
Omar
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
[AjaxMethod]
public void UsernameValidation()
{
if (txtRegUsername.Text != "smith")
{ txtRegUsername.MarkInvalid("Username invalid"); }
}
[AjaxMethod]
public void PasswordValidation()
{
txtRegPassword.MarkInvalid("Password invalid");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:FormPanel ID="pnlRegistration" runat="server" Title="'Inline' validation sample" MonitorPoll="500" MonitorValid="true">
<Body>
<ext:ContainerLayout ID="ContainerLayout1" runat="server" >
<ext:FieldSet ID="fldUser" runat="server" CheckboxToggle="false" AutoHeight="true"
Collapsed="false" Border="true">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="200">
<ext:Anchor>
<ext:TextField ID="txtRegUsername" Width="200" runat="server" MsgTarget="Side" FieldLabel="username">
<Listeners>
<Blur Handler="Coolite.AjaxMethods.UsernameValidation();" />
</Listeners>
</ext:TextField>
</ext:Anchor>
<ext:Anchor>
<ext:TextField ID="txtRegPassword" Width="200" runat="server" InputType="Password"
MsgTarget="Side" FieldLabel="password">
<Listeners>
<Blur Handler="Coolite.AjaxMethods.PasswordValidation();" />
</Listeners>
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:FieldSet>
</ext:ContainerLayout>
</Body>
</ext:FormPanel>
</form>
</body>
</html>
