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:

val1.jpg

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:

val2.jpg

For AspNet.ScriptManger.jQuery-Version 1.9.1:

val3.jpg

For Microsoft.AspNet.ScriptManager.MSAjax:

val 4.jpg

For Microsoft.AspNet.ScriptManager.WegForms:

val 5.jpg

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.

valid2.jpg

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.

Up Next
    Ebook Download
    View all
    Learn
    View all