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