Geek Answers Handbook

Jquery unobtrusive

I am trying to include unobtrusive.js in my mvc3 view, but when I do this, I get a bunch of errors when rendering is displayed. The exception is an unobtrusive script, somewhere where it checks something against undefined ', like this line here

if(message !== undefined) //Compare against undefined, because an empty message is legal

The error I get is

Microsoft JScript runtime error: 'undefined' is null or not an object

Here is my script declaration for my presentation.

 <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script> <script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script> <link href="@Url.Content("~/Content/themes/base/jquery.ui.autocomplete.css")" rel="stylesheet" type="text/css" />
+4
source share
4 answers

You need to use jquery.validate.min.js instead of jquery.validate.unobtrusive.js

+9
source

If you want to:

  • Use .NET Model Validation (Data Annotation Attributes)
  • Use html5 data attributes instead of non-semantic css classes

You need both: jquery.validate and jquery.validate.unobtrusive

Script Links:

Note. In this example, the js files are located in the "public" folder in the project / site, but if possible, you are using Microsoft from Google CDNs.

 <script src="@Url.Content("~/public/js/libs/jquery.validate.min.js")"></script> <script src="@Url.Content("~/public/js/libs/jquery.validate.unobtrusive.min.js")"></script>

Model:

 public class PimpModel { [Required] [StringLength(20)] [DisplayName("Pimp Name")] public string PimpName { get; set; } }

Web.config Settings

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

Show form code

 @model SomeProject.Models.PimpModel @{ View.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; Html.EnableUnobtrusiveJavaScript(true); } <h2>Pimp</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> @Html.ValidationMessageFor(model => model.PimpName) <div class="editor-label"> @Html.LabelFor(model => model.PimpName) </div> <div class="editor-field"> @Html.TextBoxFor(model => model.PimpName) </div> <input type="submit" value="Save"></fieldset> }

Html helpers generate html data attributes that are used by an unobtrusive library, an unobtrusive library uses functions in a validation library and all happy days ...

+7
source

Make sure your configuration has the following.

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

Although jQuery is Open Source, the jquery.validate.unobtrusive.min.js library was provided by Microsoft (as indicated at the top of my js file):

 /* ** Unobtrusive validation support library for jQuery and jQuery Validate ** Copyright (C) Microsoft Corporation. All rights reserved. */

Try replacing the library to use the new jquery.validate.min.js replacement

One way is to use the Visual Studio NuGet Package Manager . following:

  • Right-click your Links folder.
  • Select "Add Link to Library Package ..."
  • When the window opens, select "Online" in the menu of the left side panel.
  • In the upper right corner, type 'jquery.validate' and press enter.
  • Find "jQuery Validation" and click "Install . "
  • Change your code to use the new library name 'jquery.validate.min.js'

I tested this, and my client-side validation seems to work without annoying exceptions when debugging in Visual Studio.

+1
source

More articles:


All Articles