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>

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.

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

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>

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

All the validator error has been solved by this

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

Error must be vanished enjoy....

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>

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"
        });
    }

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

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 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 :)

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>