jquery unobtrusive

问题:

I'm trying to include the unobtrusive.js to my mvc3 view, but when I do, I get a bunch of errors when the view renders. The exception is in the unobtrusive script, anywhere where it checks anything against 'undefined' like this line here

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

The error I'm getting is

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

Here is my script declaration for my view.

<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" />  

回答1:

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

回答2:

If you want to:

• Use .NET model validation (data annotations attributes)
• Use html5 data attributes instead of non semantic css classses

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

Script References:

Note: In this example the js files are located under "public" folder in the project/site but you use Microsoft of Google CDN addresses if possible.

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

View 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> } 

The html helpers generate data attributes in the form html that are used by the unobtrusive library, the unobtrusive library uses functions in the validation library and it's all happy days...

回答3:

Make sure you have the following in your config.

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

回答4:

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 replacement jquery.validate.min.js

One way is to use Visual Studio's NuGet Package Manager by the following:

1. Right-click on your Project's References folder
2. Select 'Add Library Package Reference...'
3. When the window opens, Select 'Online' from the left sidebar menu.
4. On the top-right, type in 'jquery.validate' and hit the enter key.
5. Locate the 'jQuery Validation' and click the 'Install' button.
6. Change your code to use the new library name 'jquery.validate.min.js'

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

文章来源: jquery unobtrusive