Ways to Fix the Errors of Unobtrusive Validation in ASP.NET 4.5

Introduction

In this article we will learn how to fix the errors of Unobtrusive Validation Mode.

In my last article "How to enable Unobtrusive Validation in ASP.NET 4.5" you learned how to enable Unobtrusive Validation in three ways. While you were reading that article you must have noticed that in every step I had made value=None, there was a reason for making value=None. If you simply run this code:

<asp:TextBox runat="server" ID="txt" />
     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="txt is required" ControlToValidate="txt" runat="server" Text="Text is Required" Display="Dynamic" />

    <asp:Button ID="Button1" Text="Send info" runat="server" />

Then you will get an error message like this:

Instead of fixing this error I disable the Unobtrusive Validation by making it's Value=None after which the code shown above runs successfully without giving the error. But we must fix the error shown above so let's do that now.

Step 1

Re-enable the Unobtrusive Validation

Now we must install the Nuget Packages using:

1. jQuery
2. AspNet.ScriptManager.jQuery-Version 1.9.1
3. Microsoft.AspNet.ScriptManger.MSAjax
4. Microsoft.AspNet.ScriptManager.WebForms

Step 2

To install these Nuget Packages you must run the following code in the "Package Manager Console".

For jQuery:

For AspNet.ScriptManger.jQuery-Version 1.9.1:

For Microsoft.AspNet.ScriptManager.MSAjax:

For Microsoft.AspNet.ScriptManager.WegForms:

Step 3

Now if you run the application you will see that the exception is gone, this is because these Nuget Packages automatically register the script needed with the ScriptManager control.

Step 4

You can see that the application is working properly but our work is not yet completed; this is because, if you apply these settings to the ControlPanel then this won't work as you must add a few more things so that it can work properly for the Control Panel also.

The Control Panel requires the Script Manager Control on the page or the Master Page, so let's add that one also.

Write this code on your Web Page or the Master Page under the <Form>.

<asp:ScriptManager runat="server" ID="scriptManager1">
         <Scripts>
             <asp:ScriptReference Name="MsAjaxBundle" />
             <asp:ScriptReference Name="jquery" />
             <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
             <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
             <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
             <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
             <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
             <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
             <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
             <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
             <asp:ScriptReference Name="WebFormsBundle" />
         </Scripts>
     </asp:ScriptManager>

Now you can run your application and I am sure that now no more errors will exist.