Random AutoCompleteBox glitch when using RequiredFieldValidator

2 posts, 0 answers
  1. Condorito
    Condorito avatar
    38 posts
    Member since:
    Mar 2009

    Posted 11 Aug 2014 Link to this post

    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>
     
    <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>
        </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>
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 14 Aug 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top