Telerik JQuery not working with Validators

[KDL]

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!

[KDL]

This is probably simple but still haven't found a solution. Anyone have ideas why the Telerik JQuery would work differently?

[Slav]

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

 

 

[KDL]

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.

[KDL]

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!

[Slav]

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

 

 

[KDL]

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>