What's New?

[CLOSED] [0.8.2] Validation message in multifield

  1. #1
    Aug 20, 2010, 2:11 PM

    [CLOSED] [0.8.2] Validation message in multifield

    I've come across a display issue when using validation messages with MsgTarget set to Under in a MultiField control. I've included sample code.

    In IE7 you can replicate the issue by clicking Login to generate the messages, which will be correctly positioned at first. Then click on, or tabe to, one of the text fields and the message will jump under the other control (LinkButton).

    In FireFox 3.6.8 the message doesn't correctly display at all - it starts after the LinkButton and wraps under it.

    Is there a setting/property I'm not setting, or a workaround for this?

    <%@ Page Language="C#" AutoEventWireup="true" %>
<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    
    <script runat="server">
        protected void btnLogin_Click(object sender, AjaxEventArgs e)
        {
        }
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <ext:FormPanel 
            ID="LoginFormPanel" 
            runat="server" 
            Title="Login" 
            Width="400" 
            Height="220" 
            Frame="true" 
            Border="true">
            <Body>
                <ext:FormLayout ID="FormLayout1" runat="server">
                    <Anchors>
                        <ext:Anchor>
                            <ext:Label ID="PanelHeader" runat="server" HideLabel="true" Text="Please enter your User Name and Password below to access the site."></ext:Label>
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:MultiField ID="MultiField1" runat="server" FieldLabel="User Name">
                                <Fields>
                                    <ext:TextField ID="UserName" runat="server" AllowBlank="false" MsgTarget="Under" BlankText="User Name is required."  />
                                    <ext:LinkButton ID="LinkButton1" runat="server" Text="Forgot?"></ext:LinkButton>
                                </Fields>
                            </ext:MultiField>
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:MultiField ID="MultiField2" runat="server" FieldLabel="Password">
                                <Fields>
                                    <ext:TextField ID="Password" runat="server" InputType="Password" AllowBlank="false" MsgTarget="Under" BlankText="Password is required." />
                                    <ext:LinkButton ID="LinkButton2" runat="server" Text="Forgot?"></ext:LinkButton>
                                </Fields>
                            </ext:MultiField>
                        </ext:Anchor>
                    </Anchors>
                </ext:FormLayout>
            </Body>
            <Buttons>
                <ext:Button ID="btnLogin" runat="server" Text="Login">
                    <AjaxEvents>
                        <Click 
                            Before="if(!#{LoginFormPanel}.getForm().isValid()) { return false; }" 
                            OnEvent="btnLogin_Click">
                            <EventMask ShowMask="true" Msg="Verifying..." MinDelay="1000" />
                        </Click>
                    </AjaxEvents>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </form>
</body>
</html>
    Last edited by Daniil; Aug 24, 2010 at 3:08 PM. Reason: [CLOSED]
  2. #2
    Aug 22, 2010, 7:33 PM
    Hi,

    Please use the following code in the head section
    <ext:ScriptContainer runat="server" />
    
    <script type="text/javascript">
        Coolite.Ext.MultiField.prototype.onRender = Coolite.Ext.MultiField.prototype.onRender.createSequence(function () {
            this.wrap.createChild({ cls : "x-form-clear-left" });
        });
    </script>

    Here is the sample
    <%@ Page Language="C#" AutoEventWireup="true" %>
<%@ 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">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
     
    <script runat="server">
        protected void btnLogin_Click(object sender, AjaxEventArgs e)
        {
        }
    </script>
    
    <ext:ScriptContainer runat="server" />
    
    <script type="text/javascript">
        Coolite.Ext.MultiField.prototype.onRender = Coolite.Ext.MultiField.prototype.onRender.createSequence(function () {
            this.wrap.createChild({ cls : "x-form-clear-left" });
        });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
         
        <ext:FormPanel
            ID="LoginFormPanel"
            runat="server"
            Title="Login"
            Width="400"
            Height="220"
            Frame="true"
            Border="true">
            <Body>
                <ext:FormLayout ID="FormLayout1" runat="server">
                    <Anchors>
                        <ext:Anchor>
                            <ext:Label ID="PanelHeader" runat="server" HideLabel="true" Text="Please enter your User Name and Password below to access the site."></ext:Label>
                        </ext:Anchor>
                        <ext:Anchor>                            
                            <ext:MultiField ID="MultiField1" runat="server" FieldLabel="User Name">
                                <Fields>                 
                                    <ext:TextField ID="UserName" runat="server" AllowBlank="false" MsgTarget="Under" BlankText="User Name is required."  />                                                
                                    <ext:LinkButton ID="LinkButton1" runat="server" Text="Forgot?"></ext:LinkButton>
                                </Fields>
                            </ext:MultiField>
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:ComboBox ID="Password" runat="server" AllowBlank="false" MsgTarget="Under" BlankText="Password is required." />
                        </ext:Anchor>
                    </Anchors>
                </ext:FormLayout>
            </Body>
            <Buttons>
                <ext:Button ID="btnLogin" runat="server" Text="Login">
                    <AjaxEvents>
                        <Click
                            Before="if(!#{LoginFormPanel}.getForm().isValid()) { return false; }"
                            OnEvent="btnLogin_Click">
                            <EventMask ShowMask="true" Msg="Verifying..." MinDelay="1000" />
                        </Click>
                    </AjaxEvents>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </form>
</body>
</html>
    P.S. The above fix is commited to the SVN also (to the trunk)
  3. #3
    Aug 23, 2010, 4:54 PM
    Thanks for the reply.

    The script fixed the issue in Firefox. But in IE7, the fields don't display at all with that code in.
  4. #4
    Aug 23, 2010, 8:16 PM
    Hi,

    I changed fix to support IE7
    Coolite.Ext.MultiField.prototype.onRender = Coolite.Ext.MultiField.prototype.onRender.createSequence(function () {
            this.wrap.parent().createChild({ cls : "x-form-clear-left" });
        });
  5. #5
    Aug 24, 2010, 2:51 PM
    Perfect. Thanks!

Similar Threads

  1. Message Icons for Message Box from code behind and in Java script
    By Dorababu in forum 2.x Help
    Replies: 1
    Last Post: Mar 10, 2012, 3:58 PM
  2. [CLOSED] 'Validation of viewstate MAC failed' message when button clicked
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 23, 2012, 6:57 PM
  3. [CLOSED] custom validation error message for textfield?
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 11, 2011, 9:45 AM
  4. [CLOSED] how to control the validation sequence between the client side validation and remote validation
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  5. [CLOSED] validation message
    By majestic in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Sep 29, 2009, 7:07 AM

Posting Permissions