This is a migrated thread and some comments may be shown as answers.

Validate Phone Number for Telerik RadAutoCompleteBox Not Working in C#

2 Answers 280 Views

AutoCompleteBox

This is a migrated thread and some comments may be shown as answers.

Hariharan asked on 27 Feb 2016, 06:05 AM

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>

<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<div>
<div>
<h2>Token mode</h2>

<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 runat="server" id="RadWindowManager1"></telerik:RadWindowManager>
</div>

<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>

<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:sampleConnectionString %>" SelectCommand="SELECT [PhoneNumber] FROM [tbl_PhNo]"></asp:SqlDataSource>

<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 runat="server" ID="RadAjaxLoadingPanel1" />
</form>

</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 Answers, 1 is accepted

Accepted

answered on 01 Mar 2016, 09:55 AM

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