Telerik JQuery not working with Validators

7 posts, 1 answers
  1. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 12 Aug 2014 Link to this post

    I am trying to apply a Red border to fields that have failed validation using the following code:

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
     
        <div>
            <asp:TextBox ID="TextBox1" runat="server" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator" />
        </div>
     
        <asp:Button ID="Button1" runat="server" Text="Test" />
     
        <script type="text/javascript">
            $(function () {
                if (typeof ValidatorUpdateDisplay != 'undefined') {
                    var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;
                    ValidatorUpdateDisplay = function (val) {
                        if (!val.isvalid) {
                            $("#" + val.controltovalidate).css("border", "2px solid red");
                        }
     
                        originalValidatorUpdateDisplay(val);
                    }
                }
            });
        </script>
    </form>

    The validation itself works fine. But the red border never gets applied. If I remove the Telerik script references and reference non-Telerik JQuery, the red border gets applied correctly.

    I would like to continue using the Telerik script references for maximum compatibility with the RadControls which I use extensively. So I'd appreciate any ideas about how to get around this problem. Thanks!
  2. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 14 Aug 2014 Link to this post

    This is probably simple but still haven't found a solution. Anyone have ideas why the Telerik JQuery would work differently?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 Aug 2014 Link to this post

    Hello,

    I tested the example you provided in a sample page, however the border appeared on my end. You can find attached the page and a screen capture that shows the behavior on my end. Please check them and compare the sample to your actual project for differences in the setup. Note that I tested with the latest version of UI for ASP.NET AJAX that comes with version 1.9.1 of jQuery.

    If there is something I am missing, please modify the attached page so that the problem is reproducible and send it for further inspection.

    Regards,
    Slav
    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.

     
  5. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 15 Aug 2014 Link to this post

    I pasted your page into my solution and it still did not work. I am using the latest version of the Telerik AJAX UI. Please try the following to reproduce:
    1. Create new Telerik C# web application
    2. Include UI and skins (checked "add referenced assemblies to solution")
    3. Checked: Enable Compression Module, Use ScriptManager CDN, Use StyleSheetManager CDN
    4. Checked: Use Ajaxified Templates, Use JQuery Support
    5. Paste the HTML/JS into the default page

    When run, the validation message appears but not the color border. I was not able to attach the project that the above steps generates for your review because the forum system won't allow a zip file.


  6. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 19 Aug 2014 Link to this post

    Hi Slav,

    Using my instructions in the previous post, were you able to replicate the problem?

    I really appreciate you looking at this, I am in the process of converting an existing project to use the Telerik controls and I need this to work. Thanks!
  7. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 19 Aug 2014 Link to this post

    Hello,

    I followed the steps and created a new .NET 4.0 Telerik web application, nevertheless the problem was not encountered as you can check in the attached screen capture.

    If you created a .NET 4.5 Telerik web application, however, it is possible that you have encountered a known issue with Unobtrusive Validation, which is a new feature of .NET 4.5 that is enabled by default. You should be able to avoid it by using the following configuration for RadScriptManager in order to define the order in which the Telerik scripts and the ASP.NET validation scripts are loaded:
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
        <Scripts>
            <asp:ScriptReference Name="Telerik.Web.UI.Common.Core.js" Assembly="Telerik.Web.UI" />
            <asp:ScriptReference Name="Telerik.Web.UI.Common.jQuery.js" Assembly="Telerik.Web.UI" />
            <asp:ScriptReference Name="Telerik.Web.UI.Common.jQueryInclude.js" Assembly="Telerik.Web.UI" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        </Scripts>
    </telerik:RadScriptManager>


    Regards,
    Slav
    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.

     
  8. KDL
    KDL avatar
    36 posts
    Member since:
    Aug 2005

    Posted 19 Aug 2014 in reply to Slav Link to this post

    Thanks for your help Slav, your workaround did the trick. I am using .NET 4.5 and found that I only need to specify the WebUIValidation.js after the Telerik scripts in order to make this work.

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePartialRendering="true">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
     
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        </Scripts>
    </telerik:RadScriptManager>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017