RadButton and ASP.NET 4.5 Unobtrusive Validation

[Telerik Admin]

Usually when the RadButton is used for submitting a form, the page also contains validation controls that check the entered data. The following sample presents such a setup:

<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<asp:TextBox ID="Textbox1" runat="server" />
<telerik:RadButton ID="RadButton1" runat="server" Text="Submit" />
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ErrorMessage="Enter a value in the input"
    ControlToValidate="Textbox1" />

If you place this markup in an ASP.NET 4.5 website and run it, you will encounter the following exception:

WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).

According to Microsoft, Unobtrusive Validation is the new way ASP.NET validation works and by default it requires jQuery. The following approach will help you register the jQuery that is shipped with the RadControls for ASP.NET AJAX so that it can be used by the Unobtrusive Validation feature:

1. Add a Global.asax file.
2. Put the following code in the Application_Start event handler:
   
   

   var def = new ScriptResourceDefinition()
   {
       ResourceName = "Telerik.Web.UI.Common.jQuery.js",
       ResourceAssembly = System.Reflection.Assembly.GetAssembly(typeof(Telerik.Web.UI.RadWebControl))
   };
   
   ScriptManager.ScriptResourceMapping.AddDefinition("jquery", def);

NOTE: In order for Unobtrusive Validation to work, the default ASP ScriptManager needs to be instructed to register jQuery before the core scripts that provide client-side validation : http://connect.microsoft.com/VisualStudio/feedback/details/748064/unobtrusive-validation-breaks-with-a-script-manager-on-the-page.

[blu_joe]

This code works very well in enabling unobtrusive validation but now I've a problem with it.
I have a page with some standard TextBox and some RadComboBox; most of them have a RequiredFieldValidator with Text="*" and ErrorMessage="Some errore message"

On the bottom of the page there is a ValidationSummary:

<asp:ValidationSummary ID="ValidationSummary1" runat="server" DisplayMode="List"
        ShowMessageBox="True" ShowSummary="False" />

The form is submitted by a RadButton. Now, if I turn unobtrusive validation on and try to submit the page in an inconsistent (i.e. "non valid") state, the validation does not fires and the page is posted back; the alert with all of the error messages does not shows but I can see the "*" (the RequiredFieldValidator Text property) next to the controls with invalid values.

I'm using Web.UI version Q3 2012.

Thank you.

[Slav]

Hi Joe,

It appears that the unobtrusive validation is performed on the server, regardless of the button that is used. You can find attached a sample project that demonstrates this. If this happens only with a RadButton on your end, please check the sample and let us know how to modify it in order to match your setup.

Greetings,
Slav
the Telerik team

[blu_joe]

Thank you for the reply.

The attached sample does reproduce exactly my problem: with unobtrusive validation on, both buttons triggers the postback even if the form is not valid. With unobtrusive validation off (i.e. plain old ASP.NET validation mode) the postback is not triggered if the form is invalid, as it should be. Is this an expected behaviour?

Thank you.

[Slav]

Hi Joe,

We tried enabling the unobtrusive validation with the jQuery library, embedded in RadControls for ASP.NET AJAX, and with an external instance of the library using the steps in this article. In both cases the validation is executed on the server. This could either be an issue with the unobtrusive validation or the validation is designed to function this way. Nevertheless, it is not related to the RadControls and as such it is out of the scope of our support services.

Greetings,
Slav
the Telerik team

[blu_joe]

If you try the example at the end of this article, you'll find that the unobtrusive validation is done on the client without a postback, as it should be.

I tried to make it works in my project using the embedded Telerik jQuery library and the instrunctions found here in order to use the validation plugins, but it doesn't worked, i.e. a postback is always triggered and the validation summary does not display any message.

[Slav]

Hi Joe,

After investigating the scenario further I was able to pinpoint the cause of the incorrect behavior. It appears that by design the ScriptManager loads the core scripts that provide client side validation before the jQuery library and you need to explicitly instruct the control to load the jQuery first as described here.

Even if this is not related to the RadControls for ASP.NET AJAX, the information in the sticky thread will be updated to include this instruction for enabling the unobtrusive validation as it is quite important.

Kind regards,
Slav
the Telerik team

[blu_joe]

Thank you for your help Siav.

Anyway, it still doesn't work.
In my scenario, I have a MasterPage with a RadScriptManager, like this:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True">
    <Scripts>
        <%--Needed for JavaScript IntelliSense in VS2010--%>
        <%--For VS2008 replace RadScriptManager with ScriptManager--%>
        <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" />
        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />
        <asp:ScriptReference Path="js/jquery.validate.min.js" />
        <asp:ScriptReference Path="js/jquery.validate.js" />
        <asp:ScriptReference Path="js/jquery.validate.unobtrusive.js" />
        <asp:ScriptReference Path="js/jquery.validate.unobtrusive.min.js" />
        <asp:ScriptReference Path="js/commons.js" />
        <asp:ScriptReference Path="js/gridFunctions.js" />
    </Scripts>
</telerik:RadScriptManager>

And I get this error:

[NullReferenceException: Object not set to an instance of an object.]
   Telerik.Web.UI.ScriptEntry.GetSerializedAssemblyInfo() +237
   Telerik.Web.UI.ScriptEntrySlot.GetSerializedAssemblyInfo(ScriptEntry scriptEntry) +41
   Telerik.Web.UI.ScriptEntrySlot.SerializeScriptEntry(ScriptEntry scriptEntry) +90
   Telerik.Web.UI.ScriptEntryUrlBuilder.TryAddScriptEntry(ScriptEntry scriptEntry) +81
   Telerik.Web.UI.ScriptEntryUrlBuilder.RegisterScriptEntry(ScriptEntry scriptEntry) +306
   Telerik.Web.UI.RadScriptManager.OnResolveScriptReference(ScriptReferenceEventArgs e) +684
   System.Web.UI.ScriptManager.RegisterScripts() +274
   System.Web.UI.ScriptManager.OnPagePreRenderComplete(Object sender, EventArgs e) +205
   System.EventHandler.Invoke(Object sender, EventArgs e) +0
   System.Web.UI.Page.OnPreRenderComplete(EventArgs e) +121
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1155

Everything works fine if I use a standard ScriptManager.
Thank you.

[Genady Sergeev]

Hi,

Please use the fully qualified name of the System.Web assembly. Here is example:

<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"" /

The trick is that the standard ScriptManager automatically resolves the short name whereas RadScriptManager require full name. We will optimize that behavior in the future, however until then please make use of the fully qualified name.

Greetings,
Genady Sergeev
the Telerik team

[blu_joe]

Thank you, now all works fine.

[Telerik Admin]

The following help article contains more detailed information about configuring Unobtrusive Validation with the latest version of UI for
ASP.NET AJAX: http://www.telerik.com/help/aspnet-ajax/introduction-troubleshooting-jquery.html