Getting Started

If you haven't already, ensure that the following entries can be found in your web.config:

  <appSettings>
      <add key="ClientValidationEnabled" value="true" />
      <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

Include jQuery Validation Unobtrusive Native into your project (available on Nuget or on GitHub). With this in place you should be able to switch from using the existing TextBoxFor / DropDownListFor / CheckBoxFor / TextAreaFor / RadioButtonFor / ListBoxFor / PasswordFor HtmlHelper statements in your views and to jQuery Validation Unobtrusive Native's equivalent by passing true to the useNativeUnobtrusiveAttributes parameter. (By convention this is the first parameter after the Expression<Func<TModel, TProperty>> expression parameter in each helper.

Ensure that you have the latest version of jquery.validate.js included, you can find it here (minimum version supported is 1.11.0). Oh, and remember that you no longer need to serve up the jquery.validate.unobtrusive.js on a screen where you are using jQuery Validation Unobtrusive Native. All you need is jquery.validate.js (and of course jQuery). However, if you were using jquery.validate.unobtrusive.js to trigger your screen validation on page load then remember that you will now need to do this yourself like this:

  <script>
      $("form").validate();
  </<script>

Using the jQuery Validation Unobtrusive Native HTML Helper overloads

Where you would previously have written:

    @Html.TextBoxFor(x => x.WeAreTextBox)

To use jQuery Validation Unobtrusive Native you would put:

    @Html.TextBoxFor(x => x.WeAreTextBox, true)

Or, where you would have written:

    @Html.DropDownListFor(x => x.WeAreDropDown, 
      new List<SelectListItem> {
        new SelectListItem{ Text = "Please select", Value = "" },
        new SelectListItem{ Text = "An option", Value = "An option"}
    })

Now you would put:

    @Html.DropDownListFor(x => x.WeAreDropDown, true, 
      new List<SelectListItem> {
        new SelectListItem{ Text = "Please select", Value = "" },
        new SelectListItem{ Text = "An option", Value = "An option"}
    })

The only differences above are the extra true arguments being passed. If you passed false instead jQuery Validation Unobtrusive Native would internally call the inbuilt MVC implementation.

If you're a heavy user of the htmlAttributes parameter (and indeed others) available using the MVC HTML Helpers and you're worried that jQuery Validation Unobtrusive Native will stop you using it then fear not! The same overloads remain available to you as with the out-of-the-box HTML Helpers. jQuery Validation Unobtrusive Native adds new overloads to the existing helpers; it doesn't change the behaviour of existing helpers in any way. So doing something like this:


    @Html.TextBoxFor(x => x.WeAreTextBox, 
        htmlAttributes: new { @class="my-css-class" })

Is still completely possible.To move to using jQuery Validation Unobtrusive Native you'd just do this:


    @Html.TextBoxFor(x => x.WeAreTextBox, true, 
        htmlAttributes: new { @class="my-css-class" })

Given that there are now more overloads available you may find that using named arguments (as above) gives you terser syntax rather than specifying every argument that there is.

Take a look at the demos to see more detailed examples.

Using jQuery Validation Unobtrusive Native alongside jquery.validate.unobtrusive.js

When it comes to using jQuery Validation Unobtrusive Native side by side with jquery.validate.unobtrusive.js in the same project, you can. As you see, it takes very little effort to migrate from one approach to the other. And it's *your* choice. If you want to have one screen that uses jQuery Validation Unobtrusive Native and one screen that uses jquery.validation.unobtrusive.js then you can! Including jQuery Validation Unobtrusive Native in your project gives you the option to use it. It doesn't force you to, you can do so as you need to and when you want to. It's down to you.

P.S. If you're using the source code from GitHub in Visual Studio, make sure you have the Package Manager option "Allow NuGet to download missing packages during build" set to true. This will ensure that the required packages are downloaded from NuGet.