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

[Solved] Random AutoCompleteBox glitch when using RequiredFieldValidator

1 Answer 154 Views

AutoCompleteBox

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

Condorito asked on 11 Aug 2014, 04:35 PM

capture.jpg

Hi,

I know there were some issues in the past with using the RequiredFieldValidator not working properly with the AutoCompleteBox control (think it was empty when it wasn't), but after updating our Telerik dll to the assembly version of 2014.1.403.35, it seems the issue has gone away for the most part. The issue occasionally shows up for me, but in a random way. Please note that I am using this:

http://www.telerik.com/help/aspnet-ajax/input-validation.html

to highlight required fields that have not been filled out by the user.

One way I'm able to recreate this issue is by pressing the "Get Quote" button first so the required field validators are triggered. I then fill out the information for the first item, but the highlight (in this case, an error icon) is never cleared out and clicking on the submit button doesn't work (see the attached image). Please note that this happens randomly, so it could take four, five tries for the glitch to show up.

The only thing I didn't include was the data source, but I'm sure this would work with any with minor tweaking.

Thank you for your help.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="ramMain" runat="server" DefaultLoadingPanelID="ralpDefault" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnGetQuote">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="LTLUI" UpdatePanelCssClass="" LoadingPanelID="ralpDefault"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadSkinManager runat="server" ID="rskmMain" Skin="Windows7" ShowChooser="false" />

<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all" EnableRoundedCorners="false">

</telerik:RadFormDecorator>

<telerik:RadAjaxLoadingPanel ID="ralpDefault" runat="server" Height="75px" Width="75px" />

<div id="LTLUI" runat="server" >

<table>

<tr>

<td colspan="2">Origin Postal Code</td>

</tr>

<tr>

<td width="290px">

<telerik:RadAutoCompleteBox OnClientDropDownOpening="OnClientDropDownOpening" OnClientEntryAdding="AutoCompleteBox_OnClientEntryAdding" InputType="Token" TextSettings-SelectionMode="Single" AllowCustomEntry="true" ID="racbOriginZipCode" Width="290px" runat="server" DropDownWidth="250px" DropDownHeight="325px" EmptyMessage="Required field" >

<WebServiceSettings Path="Default.aspx" Method="GetAirportChildren" ></WebServiceSettings>

<ClientDropDownItemTemplate>

<table cellpadding="1" cellspacing="1">

<tr>

<td> #= Attributes.ZipCode #, #= Attributes.City # (#= Attributes.StateMasterCode #)</td>

</tr>

</table>

</ClientDropDownItemTemplate>

</telerik:RadAutoCompleteBox>

</td>

<td>

<asp:RequiredFieldValidator runat="server" ID="rfvOriginZipCode" ControlToValidate="racbOriginZipCode" Text="<img src='../../../Images/Icons/Error.gif'/>" ValidationGroup="InputArea" Enabled="True" InitialValue="" />

</td>

</tr>

<tr>

<td colspan="2">Destination Postal Code</td>

</tr>

<tr>

<td colspan="1">

<telerik:RadAutoCompleteBox InputType="Token" TextSettings-SelectionMode="Single" AllowCustomEntry="true" ID="racbDestZipCode" EmptyMessage="Required field" Width="290px" runat="server" DropDownWidth="250px" DropDownHeight="290px" OnClientEntryAdding="AutoCompleteBox_OnClientEntryAdding" >

<WebServiceSettings Path="Default.aspx" Method="GetAirportChildren"></WebServiceSettings>

<ClientDropDownItemTemplate>

<table cellpadding="1" cellspacing="1">

<tr>

<td> #= Attributes.ZipCode #, #= Attributes.City # (#= Attributes.StateMasterCode #)</td>

</tr>

</table>

</ClientDropDownItemTemplate>

</telerik:RadAutoCompleteBox>

</td>

<td>

<asp:RequiredFieldValidator runat="server" ID="rfvDestZipCode" ControlToValidate="racbDestZipCode" Text="<img src='../../../Images/Icons/Error.gif'/>" ValidationGroup="InputArea" Enabled="True"/>

</td>

</tr>

</table>

<telerik:radbutton runat="server" id="btnGetQuote" Text="Get Quote" CausesValidation="true" ValidationGroup="InputArea" Width="500px" />

</div>

<telerik:RadCodeBlock runat="server" ID="rcbJavascript">

<script type="text/javascript">

if (ValidatorUpdateDisplay && typeof (ValidatorUpdateDisplayOriginal) === "undefined") {

ValidatorUpdateDisplayOriginal = ValidatorUpdateDisplay;

ValidatorUpdateDisplay = function (val) {

var control = $find(val.controltovalidate);

if ((!val.isvalid) && control && control.set_invalid) {

control.set_invalid(true);

}

ValidatorUpdateDisplayOriginal(val);

};

}

function OnClientDropDownOpening(sender, eventArgs) {

if (sender.get_entries().get_count() > 0) {

eventArgs.set_cancel(true);

}

function AutoCompleteBox_OnClientEntryAdding(sender, eventArgs) {

if (sender.get_entries().get_count() > 0) {

eventArgs.set_cancel(true);

}

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

1 Answer, 1 is accepted

answered on 14 Aug 2014, 01:14 PM

Hello,

I was not able to replicate such behavior with the RadAutoCompleteBox and the RequiredFieldValidator . I used the provided code in order to test your scenario and it works as expected. Please note that when the error message is shown on the right and you select an item then the RadAutoCompleteBox input field should lose its focus and the image will be hidden. Please watch a small video that I prepared while I was testing the scenario.

Regards,
Boyan Dimitrov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.