RadInputManager focus on error

6 posts, 1 answers
  1. Mehmet Tirgil
    Mehmet Tirgil avatar
    21 posts
    Member since:
    Aug 2009

    Posted 14 Jan 2010 Link to this post

    hi,
    i use rad inputmanager like this

    <telerik:RadInputManager ID="RadInputManager1" runat="server" Skin="WebBlue" >
                                    <telerik:TextBoxSetting Validation-IsRequired="true" Validation-ValidationGroup="News">
                                        <TargetControls>
                                            <telerik:TargetInput ControlID="TbxContentHeader" />
                                        </TargetControls>
                                    </telerik:TextBoxSetting>
                                </telerik:RadInputManager>

    when TbxContentHeader is empty and press button it works. But it can not be focused to TbxContentHeader. So my button is at bottom of the page, TbxContentHeader is at the top of the page. So users can not see why button does not work. How can i focus when error appears.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Jan 2010 Link to this post

    Hi,

    Try the following code in order to focus to the textbox when validation fails.

    aspx:
     
    <telerik:RadInputManager ID="RadInputManager1" runat="server" Skin="WebBlue"
        <telerik:TextBoxSetting Validation-IsRequired="true"
            <ClientEvents  OnValidating="OnValidating" /> 
            <TargetControls>             
                <telerik:TargetInput ControlID="TbxContentHeader" /> 
            </TargetControls> 
        </telerik:TextBoxSetting> 
    </telerik:RadInputManager> 
    <asp:TextBox ID="TbxContentHeader" Text="" runat="server"></asp:TextBox> 

    javascript:
     
        function OnValidating(sender, args) { 
            var id = args.get_input().get_id(); 
            var textbox = document.getElementById(id); 
            if (textbox.value == "") { 
                textbox.focus(); 
            } 
        } 

    -Shinu.
  3. Mehmet Tirgil
    Mehmet Tirgil avatar
    21 posts
    Member since:
    Aug 2009

    Posted 14 Jan 2010 Link to this post

    Hi,
    Thank you, it worked for me.
  4. adam
    adam avatar
    15 posts
    Member since:
    Sep 2010

    Posted 08 Jun 2011 Link to this post

    Hi 

    That kind of worked for me.

    i have a number of texboxs and have the radinputmanager set up as follows

    <telerik:RadInputManager ID="RadInputManager" runat="server">
        <telerik:TextBoxSetting EmptyMessage="Company Name" Validation-IsRequired="true" Validation-ValidationGroup="Val-contact">
            <ClientEvents OnValidating="OnValidating" />
            <TargetControls>
                <telerik:TargetInput ControlID="TxtFullname" />               
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting EmptyMessage="Address One" Validation-IsRequired="true" Validation-ValidationGroup="Val-contact">
        <ClientEvents OnValidating="OnValidating" />
            <TargetControls>
                <telerik:TargetInput ControlID="TxtEmailAddress" />               
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting EmptyMessage="Your Name" Validation-IsRequired="true" Validation-ValidationGroup="Val-contact">
        <ClientEvents OnValidating="OnValidating" />
            <TargetControls>
                <telerik:TargetInput ControlID="TxtTelephone" />               
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting EmptyMessage="Email Address" Validation-IsRequired="true" Validation-ValidationGroup="Val-contact">
        <ClientEvents OnValidating="OnValidating" />
            <TargetControls>
                <telerik:TargetInput ControlID="TxtEmailAddress" />               
            </TargetControls>
        </telerik:TextBoxSetting>
         <telerik:TextBoxSetting EmptyMessage="Query">
            <TargetControls>
                <telerik:TargetInput ControlID="TxtQuery" />               
            </TargetControls>
        </telerik:TextBoxSetting>  
    </telerik:RadInputManager>

    When i submit the form it focuses on "TxtEmalAddress" even though its the 2nd non validated field. also if i submit and its focuses and then i change my mind and want to navigate somewhere else on the site i can't until i've entered a value in the focused textbox.

    any ideas on these issues?

    cheers
  5. Michael
    Michael avatar
    72 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2014 Link to this post

    I have same issue.

    Any viable solution would be appreciated!

    Thanks!

  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Jan 2014 Link to this post

    Hi Dan,

    I guess you want to focus the first non validated TextBox. Please have a look into the following code snippet which works fine at my end.

    ASPX:
    <asp:TextBox ID="TxtFullname" runat="server">
    </asp:TextBox>
    <br />
    <asp:TextBox ID="TxtEmailAddress" runat="server">
    </asp:TextBox>
    <br />
    <asp:TextBox ID="TxtTelephone" runat="server">
    </asp:TextBox>
    <br />
    <asp:TextBox ID="TxtQuery" runat="server">
    </asp:TextBox>
    <br />
    <telerik:RadInputManager ID="RadInputManager" runat="server">
        <telerik:TextBoxSetting EmptyMessage="Company Name" Validation-IsRequired="true"
            Validation-ValidationGroup="Val-contact">
            <ClientEvents OnValidating="OnValidating" />
            <TargetControls>
                <telerik:TargetInput ControlID="TxtFullname" />
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting EmptyMessage="Address One" Validation-IsRequired="true" Validation-ValidationGroup="Val-contact">
            <ClientEvents OnValidating="OnValidating" />
            <TargetControls>
                <telerik:TargetInput ControlID="TxtEmailAddress" />
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting EmptyMessage="Your Name" Validation-IsRequired="true" Validation-ValidationGroup="Val-contact">
            <ClientEvents OnValidating="OnValidating" />
            <TargetControls>
                <telerik:TargetInput ControlID="TxtTelephone" />
            </TargetControls>
        </telerik:TextBoxSetting>
        <telerik:TextBoxSetting EmptyMessage="Query">
            <TargetControls>
                <telerik:TargetInput ControlID="TxtQuery" />
            </TargetControls>
        </telerik:TextBoxSetting>
    </telerik:RadInputManager>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Validate" ValidationGroup="Val-contact">
    </telerik:RadButton>

    JavaScript:
    <script type="text/javascript">
        var flag = 0;
        function OnValidating(sender, args) {
            if (flag == 0) {
                var id = args.get_input().get_id();
                var textbox = document.getElementById(id);
                if (textbox.value == textbox.defaultValue) {
                    textbox.focus();
                    flag = 1;
                }
            }
        }
    </script>

    Please elaborate your requirement if it doesn't help.
    Thanks,
    Shinu.
Back to Top