ASP.NET 2012 Unobtrusive Validation with Jquery

WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for jquery

Since .NET 4.5 the Validators use data-attributes and bounded Javascript to do the validation work, so .NET expects you to add a script reference for jQuery.

There are two possible ways to solve the error:

---

Disable UnobtrusiveValidationMode:

Add this to web.config:

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

It will work as it worked in previous .NET versions and will just add the necessary Javascript to your page to make the validators work, instead of looking for the code in your jQuery file. This is the common solution actually.

---

Another solution is to register the script:

In Global.asax Application_Start add mapping to your jQuery file path:

void Application_Start(object sender, EventArgs e) 
{
    // Code that runs on application startup
    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", 
    new ScriptResourceDefinition
    {
        Path = "~/scripts/jquery-1.7.2.min.js",
        DebugPath = "~/scripts/jquery-1.7.2.js",
        CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js",
        CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.js"
    });
}

---

Some details from MSDN:

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

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.

What is jQuery Unobtrusive Validation?

Brad Wilson has a couple great articles on unobtrusive validation and unobtrusive ajax.

It is also shown very nicely in this Pluralsight video in the section on " AJAX and JavaScript".

Basically, it is simply Javascript validation that doesn't pollute your source code with its own validation code. This is done by making use of data- attributes in HTML.

How to reinitialize jQuery unobtrusive validation?

To parse the form's validation attributes after you return it to the page you need to run this: $.validator.unobtrusive.parse('#yourFormSelector')

In my application I put this call into the ajaxComplete handler so I don't have to worry about it anymore. I have it reparse every form on the page and it's been working fine in production for quite a while (even when there are a couple hundred forms on the page).

$(document).ajaxComplete(function() {
    $.validator.unobtrusive.parse('form');
});

Fire jquery unobtrusive validation with bootstrap , Asp.net Mvc 3 and backbone

Here is my method for replacing jquery error messages with bootstrap styles when using mvc unobtrusive validation:

 /*
 * Form Validation
 * This script will set Bootstrap error classes when form.submit is called.
 * The errors are produced by the MVC unobtrusive validation.
 */
 $(function () {
     $('form').submit(function () {
         $(this).find('div.control-group').each(function () {
             if ($(this).find('span.field-validation-error').length == 0) {
                 $(this).removeClass('error');
             }
         });

         if (!$(this).valid()) {
             $(this).find('div.control-group').each(function () {
                 if ($(this).find('span.field-validation-error').length > 0) {
                     $(this).addClass('error');
                 }
             });
         }
     });
     $('form').each(function () {
         $(this).find('div.control-group').each(function () {
             if ($(this).find('span.field-validation-error').length > 0) {
                 $(this).addClass('error');
             }
         });
     });
 });
 var page = function () {
     //Update that validator
     $.validator.setDefaults({
         highlight: function (element) {
             $(element).closest(".control-group").addClass("error");
         },
         unhighlight: function (element) {
             $(element).closest(".control-group").removeClass("error");
         }
     });
 } ();
 /* End Form Validation */

There is some talk in the comments for the question, but the tech behind this script is Asp.Net MVC ViewModel object decorated with Data Annotations ([Required] in my login case), which is passed to a View and displayed with the following (only included relevant bits unless more is required).

@using (Html.BeginForm())
{
    ...
    <div id="errors"></div>
    @Html.ValidationSummary(true, "Sign in was unsuccessful", new { @class = "alert alert-block alert-error" })
    <div id="laatikko" class="well">
        <div class="control-group">
        <label for="kayttajaTunnus" class="control-label">@Kaannokset.Yhteiset.Sähköposti</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.kayttajaTunnus)
            @Html.ValidationMessageFor(m => m.kayttajaTunnus, null, new { @class = "help-inline" })
        </div>
    </div>
    <div class="control-group">
        <label for="salasana" class="control-label">@Kaannokset.Yhteiset.Salasana</label>
        <div class="controls">
            @Html.PasswordFor(m => m.salasana)
            @Html.ValidationMessageFor(m => m.salasana, null, new { @class = "help-inline error" })
        </div>
    </div>
    <input id="signIn" class="btn btn-primary" data-loading-text="Searching for user..." type="submit" value="Sign In" />
}

---

Related Topics