[c#] ASP.Net 2012 Unobtrusive Validation with jQuery

I was playing with Visual Studio 2012 and I created an empty ASP.Net Web Application, when I tried to add the traditional validator controls to a new page, this error occurs:

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

What are the steps to fix it?

This is my page markup:

<asp:Panel runat="server" ID="pnlUsername" GroupingText="Username settings">
    <div>
        <asp:Label ID="usernameLabel" Text="Please enter your username" runat="server" AssociatedControlID="username" />
    </div>
    <div>
        <asp:TextBox runat="server" ID="username" />
        <asp:RequiredFieldValidator ErrorMessage="The username is required" ControlToValidate="username" runat="server" Text=" - Required" />
    </div>
</asp:Panel>

This question is related to c# asp.net

The answer is


In the Nuget Package manager search for AspNet.ScriptManager.jQuery instead of jquery. THat way you will not have to set the mappings yourself and the project will work with the click of a simple install.

Or disable the Unobtrusive Validation by adding this line to the Configuration tag of the web.config file in the project.

  <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

This is the official Microsoft answer from the MS Connect forums. I am copying the relevant text below :-

When targeting .NET 4.5 Unobtrusive Validation is enabled by default. You need to have jQuery in your project and have something like this in Global.asax to register jQuery properly:

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", 
    new ScriptResourceDefinition {
        Path = "~/scripts/jquery-1.4.1.min.js",
        DebugPath = "~/scripts/jquery-1.4.1.js",
        CdnPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.min.js",
        CdnDebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.js"
    });

Replacing the version of jQuery with the version you are using.

You can also disable this new feature in web.config by removing the following line:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />

<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />

this line was not in my WebConfig so : I simple solved this by downgrading targetting .Net version to 4.0 :)


Other than the required "jquery" ScriptResourceDefinition in Global.asax (use your own paths):

    protected void Application_Start(object sender, EventArgs e)
    {            
        ScriptManager.ScriptResourceMapping.AddDefinition(
            "jquery",
            new ScriptResourceDefinition
            {
                Path = "/static/scripts/jquery-1.8.3.min.js",
                DebugPath = "/static/scripts/jquery-1.8.3.js",
                CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js",
                CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js",
                CdnSupportsSecureConnection = true,
                LoadSuccessExpression = "jQuery"
            });
    }

You additionally only need to explicitly add "WebUIValidation.js" after "jquery" ScriptReference in ScriptManager (the most important part):

       <asp:ScriptManager runat="server" EnableScriptGlobalization="True" EnableCdn="True">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />
            </Scripts>
        </asp:ScriptManager>

If you add it before "jquery", or if you don't add any or both of them at all (ASP.Net will then automatically add it before "jquery") - the client validation will be completely broken:

http://connect.microsoft.com/VisualStudio/feedback/details/748064/unobtrusive-validation-breaks-with-a-script-manager-on-the-page

You don't need any of those NuGet packages at all, nor any additional ScriptReference (some of which are just duplicates, or even a completely unnecessary bloat - as they are added automatically by ASP.Net if needed) mentioned in your blog.

EDIT: you don't need to explicitly add "WebForms.js" as well (removed it from the example) - and if you do, its LoadSuccessExpression will be ignored for some reason


in visual studio 2012 in the web.config change the targetFramework=4.5 to targetFramework=4.0


I suggest to instead this lines

<div>
    <asp:TextBox runat="server" ID="username" />
    <asp:RequiredFieldValidator ErrorMessage="The username is required" ControlToValidate="username" runat="server" Text=" - Required" />
</div>

by this line

<div>
    <asp:TextBox runat="server" ID="username" required />
</div>

All the validator error has been solved by this

 <appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>

Error must be vanished enjoy....


Just copy & paste any JQuery file in your project and add a Global.asax file and modify it as below:

I just paste the JQuery file in my project and add a reference in Global.asax file:

protected void Application_Start(object sender, EventArgs e)
    {
        ScriptManager.ScriptResourceMapping.AddDefinition(
        "jquery",
        new ScriptResourceDefinition
        {
            Path = "~/jquery-1.10.2.js",
            DebugPath = "~/jquery-1.10.2.js",
            CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js",
            CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js",
            CdnSupportsSecureConnection = true,
            LoadSuccessExpression = "jQuery"
        });
    }

It seems like there is a lot of incorrect information about the ValidationSettings:UnobtrusiveValidationMode value. To Disable it you need to do the following.

<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

The word None, not WebForms should be used to disable this feature.


More Info on ValidationSettings:UnobtrusiveValidationMode

Specifies how ASP.NET globally enables the built-in validator controls to use unobtrusive JavaScript for client-side validation logic.

Type: UnobtrusiveValidationMode

Default value: None

Remarks: If this key value is set to "None" [default], the ASP.NET application will use the pre-4.5 behavior (JavaScript inline in the pages) for client-side validation logic. If this key value is set to "WebForms", ASP.NET uses HTML5 data-attributes and late bound JavaScript from an added script reference for client-side validation logic.

Example:

    <appSettings>
      <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
    </appSettings>

In "configuration file" instead this lines:

<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />

by this lines:

<compilation debug="true" targetFramework="4.0" />
<httpRuntime targetFramework="4.0" />

This error because in version 4.0 library belong to "asp:RequiredFieldValidator" exist but in version 4.5 library not exist so you need to add library by yourself


Add a reference to Microsoft.JScript in your application in your web.config as below :

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5">
      <assemblies>
        <add assembly="Microsoft.JScript, Version=10.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
      </assemblies>
    </compilation>
    <httpRuntime targetFramework="4.5"/>
  </system.web>
  <appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="none"/>
  </appSettings>
</configuration>