ASP.Net 2012 Unobtrusive Validation with jQuery

Question

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 n

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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