Validate Phone Number for Telerik RadAutoCompleteBox Not Working in C#

3 posts, 1 answers
  1. Hariharan
    Hariharan avatar
    2 posts
    Member since:
    Feb 2016

    Posted 27 Feb Link to this post

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <!-- Start Form Tag -->
       <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <div>
            <div>
                <h2>Token mode</h2>
                 <!-- Telerik AutoCompleteTextBox -->
                <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2" 
                    DataSourceID="SqlDataSource1" DataTextField="PhoneNumber"  InputType="Token" Width="350" DropDownWidth="150px" Skin="Default" OnClientEntryAdded="onEntryAdded" OnClientEntryAdding="OnClientEntryAddingHandler">
                </telerik:RadAutoCompleteBox>
           </div>
            <!-- Telerik RadWindowManager -->
            <telerik:RadWindowManager runat="server" id="RadWindowManager1"></telerik:RadWindowManager>  
        </div>
           <!-- Telerik RadScriptBlock -->
     <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                function onEntryAdded(sender, eventArgs) /*Validate PhoneNumber On OnClientEntryAdded Event of Telerik RadAutoCompleteBox*/
                {
                    var autoCompleteBox = $find("<%= RadAutoCompleteBox2.ClientID %>"); 
                    var getphonenumber = eventArgs.get_entry().get_text();
                    var keycode = eventArgs.get_entry().get_keyCode();
                    if (!(keycode >= 48 && keycode <= 57) || (keycode >= 96 && keycode <= 105))
                    {
                        eventArgs.set_cancel(true);
                        alert("Only Phone Numbers are Allowed");
                    }
                }
                function OnClientEntryAddingHandler(sender, eventArgs) /*Check Max 10 PhoneNumbers On OnClientEntryAddingHandler of Telerik RadAutoCompleteBox*/
                {
                    if (sender.get_entries().get_count() > 10)
                    {
                        eventArgs.set_cancel(true);
                        alert("Maximum 10 Phone Numbers are Allowed");
                    }
                } 
            </script>
        </telerik:RadScriptBlock>
           <!-- SqlDataSource For Telerik AutoCompleteTextBox Database Connection  -->
          <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:sampleConnectionString %>" SelectCommand="SELECT [PhoneNumber] FROM [tbl_PhNo]"></asp:SqlDataSource>
       <!-- Telerik RadAjaxManager -->
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
           <!-- Telerik RadAjaxLoadingPanel -->
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
        </form>
        <!-- End Form Tag -->
    </body>
    </html>

     

    I'm currently working with telerik AutoCompleteTextBox ASP.NET Ajax, and i want to create client side validation in PhoneNumber for my page.I Referred TUTORIAL How is it Possible??

  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    290 posts

    Posted 01 Mar Link to this post

    Hi Hariharan,

    I have already posted an answer in the ticket thread that you have opened on the same topic. I would suggest you to continue the discussion there in case you have any further questions. However, I will include below my answer, in case other clients need to implement the same functionality in their projects.

    If you want to validate the user input in RadAutoCompleteBox you will have to do two things. First, you will have to allow custom user input by setting the AllowCustomEntry property of the control to true. Then, you will have to perform validation in the OnClientEntryAdding event:
    function OnClientEntryAddingHandler(sender, eventArgs) /*Check Max 10 PhoneNumbers On OnClientEntryAddingHandler of Telerik RadAutoCompleteBox*/ {
        if (sender.get_entries().get_count() > 10) {
            eventArgs.set_cancel(true);
            alert("Maximum 10 Phone Numbers are Allowed");
        }
      
        /*Validate PhoneNumber On OnClientEntryAdded Event of Telerik RadAutoCompleteBox*/
        var getphonenumber = eventArgs.get_entry().get_text();
        var phoneNumberLength = getphonenumber.length;
        var valid = true;
        // You iterate over all the chars in the user input and check each of them
        for (var i = 0; i < phoneNumberLength; i++) {
            var keycode = getphonenumber.charCodeAt(i);
            if (!(keycode >= 48 && keycode <= 57) || (keycode >= 96 && keycode <= 105)) {
                valid = false;
                break;
            }
        }
      
        if (!valid) {
            eventArgs.set_cancel(true);
            alert("Only Phone Numbers are Allowed");
        }
    }

    You can learn more about RadAutoCompleteBox client-side events from our Documentation.

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hariharan
    Hariharan avatar
    2 posts
    Member since:
    Feb 2016

    Posted 01 Mar in reply to Veselin Tsvetanov Link to this post

    Thanks Veselin Tsvetanov for helping me
Back to Top