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

Telerik JQuery not working with Validators

6 Answers 30 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
KDL
Top achievements
Rank 1
KDL asked on 13 Aug 2014, 01:21 AM
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!

6 Answers, 1 is accepted

Sort by
0
KDL
Top achievements
Rank 1
answered on 14 Aug 2014, 11:54 PM
This is probably simple but still haven't found a solution. Anyone have ideas why the Telerik JQuery would work differently?
0
Slav
Telerik team
answered on 15 Aug 2014, 03:46 PM
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.

 
0
KDL
Top achievements
Rank 1
answered on 15 Aug 2014, 05:52 PM
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.


0
KDL
Top achievements
Rank 1
answered on 19 Aug 2014, 03:35 PM
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!
0
Accepted
Slav
Telerik team
answered on 19 Aug 2014, 04:37 PM
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.

 
0
KDL
Top achievements
Rank 1
answered on 19 Aug 2014, 11:32 PM
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>
Tags
General Discussions
Asked by
KDL
Top achievements
Rank 1
Answers by
KDL
Top achievements
Rank 1
Slav
Telerik team
Share this question
or