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

Yesterday i teach my colleague asp validations. After adding validator i got an error.

musthaan
UnobtrusiveValidationMode

i am surpriced.I am not added jquery or any other plugins and created a simple form. not complex. after a lot of search i got the reason and solution. In the earlier versions of ASP.Net it was working via putting a JavaScript for that. Let’s take a simple example. I have putted three things here. A textbox, required field validator and a button like following.

<div>
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    <asp:RequiredFieldValidator ID="reqname" runat="server"
         ErrorMessage="Name is required" ControlToValidate="txtName">
     </asp:RequiredFieldValidator>
</div>

Now, When you right click and view source. You will see that there is a JavaScript code embedded to page.   If you create web application in ASP.Net 4.5 It will enabled by default. So let’s see how its works. We are going to use same thing as above. It’s works in same way as worked earlier when you click submit it will validate textbox and give a validation message “Name is required”. Now you done view source.Here you can see that It has added “data-val” attribute and based on that it will validate the control. It’s HTML5 way of doing validations. You can see it’s much cleaner then earlier version of asp.net. This validation requires a jQuery.js file as internally its using jQuery for the validations. So if you have created an empty ASP.Net 4.5 web application. You need to add following code in application_start event of global.asax file.

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

 

How to configure Unobtrusive validations in ASP.Net 4.5:
There are few ways of configuring the Unobtrusive validations in ASP.Net 4.5. There is a property got added UnobtrusiveValidationMode  and It has two value.

  • None : It will tell that validation work in old fashion way. It will disable Unobtrusive validation.
  • WebForms: It will tell that it will have Unobtrusive validations.

There are multiple ways you can configure this property. You can put that app settings like following.

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

Or you can write at application_start event like below.

void Application_Start(object sender, EventArgs e)
{
    ValidationSettings.UnobtrusiveValidationMode =
            UnobtrusiveValidationMode.WebForms;
}

Or you can write in page_load event like following.

protected void Page_Load(object sender, EventArgs e)
{
    Page.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;
}

That’s it. Hope you like it. Stay tuned for more..

Attribute Contains Selector in JQuery

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector’s string appears anywhere within the element’s attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~=”word”]), which is more appropriate in many cases.

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>attributeContains demo</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
    <input name="sub1">
    <input name="sub2">
    <input name="sub2">
    <input name="book">
    <script>
        $("input[name*='sub']").val("this box for book!");
    </script>
</body>

</html>

In this code $( “input[name*=’sub’]” ) select first three textboxes.Becouse both contains “sub” in name attribute.