Validate Unobtrusive Javascript - jQval is undefined
I'm working with the latest unobtrusive.js file that comes with the latest MVC 3 RC install.
When I fire up firebug, I'm getting a JS error (though this error is not being thrown in IE)
$jQval is undefined
[Break on this error] parse: function (selector) { [line 164]
I really don't know where to begin here. I could post a mile of my markup, but I'm not sure it'll give any more information.
Here is the bit of code out of the file that is exploding on me.
if (!skipAttach) {
valInfo.attachValidation();
}
},
// ***** RIGHT HERE ***** //
parse: function (selector) {
/// <summary>
/// Parses all the HTML elements in the specified selector. It looks for input elements decorated
/// with the [data-val=true] attribute value and enables validation according to the data-val-*
/// attribute values.
/// </summary>
/// <param name="selector" type="String">Any valid jQuery selector.</param>
$(selector).find(":input[data-val=true]").each(function () {
$jQval.unobtrusive.parseElement(this, true);
});
$("form").each(function () {
var info = validationInfo(this);
if (info) {
info.attachValidation();
}
});
}
};
Here are my script tags
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Extras/combrescombined.js/1"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/jscript"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.js" type="text/javascri开发者_如何学JAVApt"></script>
Basically what's happening is, when I submit an invalid form, the form is being posted to the server, and the server is returning the invalid flags. There is no client side validation happening.
edit
And if you care... here is the complete page markup
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Add An Event! - My App</title>
<meta charset="UTF-8" />
<link href="/Assets/Css/wmd.css" rel="stylesheet" type="text/css" />
<link rel="search" type="application/opensearchdescription+xml" title="My App" href="/assets/xml/opensearch.xml" />
<link rel="stylesheet" type="text/css" href="/Extras/siteMaster.Css/1"/>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<div id="my-app-logo">
<a href="/" title="My App"><span>My App</span></a>
</div>
</div>
<div id="logindisplay">
<ul id="logindisplaywrapper">
<li><a href="/users/1/rockinthesixstring">rockinthesixstring</a></li>
<li>|</li>
<li><a href="/#" title="Change Region" class="RegionWindow">Calgary</a></li>
<li>|</li>
<li><a href="/about">about</a></li>
<li>|</li>
<li><a href="/about/faq">faq</a></li>
<li>|</li>
<li><a href="/users/logout?go=/events/add" id="logout-opener">log out</a></li>
<li><form action="/search" id="searchForm" method="get"><input id="search-text" name="q" tabindex="1" type="text" maxlength="80" size="28" placeholder="search..." /></form></li>
</ul>
</div>
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><a href="/">Now</a></li>
<li><a href="/events/coming">Coming</a></li>
<li><a href="/events/hot">Hot</a></li>
<li><a href="/tags">Tags</a></li>
<li><a href="/users">Users</a></li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li><a class="youarehere" href="/events/add">Add Event</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div id="main">
<h1> Add An Event!</h1>
<hr />
<div id="innermain">
<h2>Add</h2>
<form action="/events/add" method="post"> <fieldset><legend>Fields</legend>
<div class="editor-field">
<input data-val="true" data-val-number="The field UserID must be a number." data-val-required="The UserID field is required." id="UserID" name="UserID" type="hidden" value="1" />
</div>
<div class="editor-field">
<input data-val="true" data-val-number="The field RegionID must be a number." data-val-required="The RegionID field is required." id="RegionID" name="RegionID" type="hidden" value="365" />
</div>
<div class="editor-label">
<label for="Title">title</label>
</div>
<div class="editor-field">
<input class="full-width-input" data-val="true" data-val-length="Username cannot exceed 50 characters." data-val-length-max="50" data-val-required="Title is required." id="Title" name="Title" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="Location">location</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-length="Location cannot exceed 100 characters" data-val-length-max="100" data-val-required="Location is required" id="Location" name="Location" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Location" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="Address">address</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-length="Address is too long" data-val-length-max="100" data-val-required="Address is required" id="Address" name="Address" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Address" data-valmsg-replace="false">*</span>
</div>
<div class="editor-field">
<input data-val="true" data-val-number="The field DownVotes must be a number." data-val-required="The DownVotes field is required." id="DownVotes" name="DownVotes" type="hidden" value="0" />
</div>
<div class="editor-field">
<input data-val="true" data-val-number="The field UpVotes must be a number." data-val-required="The UpVotes field is required." id="UpVotes" name="UpVotes" type="hidden" value="0" />
</div>
<div class="editor-label">
<label for="Description">description</label> <span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="false">*</span>
</div>
<div class="editor-field">
<noscript><h3>Please use <a href="/about/markdown">Markdown</a> to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
<textarea class="wmd-panel" cols="10" data-val="true" data-val-length="Description is too long" data-val-length-max="2048" data-val-required="Description is required" id="wmd-input" name="Description" rows="5">
</textarea>
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
<div class="editor-label">
<label for="StartDateTime">start date</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="Start Date is required" id="StartDateTime" name="StartDateTime" type="text" value="11/23/2010" /> <span class="field-validation-valid" data-valmsg-for="StartDateTime" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="EndDateTime">end date</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="EndDateTime" name="EndDateTime" type="text" value="11/23/2010" /> <span class="field-validation-valid" data-valmsg-for="EndDateTime" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="Latitude">latitude</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field latitude must be a number." data-val-required="Latitude is required" id="Latitude" name="Latitude" type="text" value="0.00" /> <span class="field-validation-valid" data-valmsg-for="Latitude" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="Longitude">longitude</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field longitude must be a number." data-val-required="Longitude is required" id="Longitude" name="Longitude" type="text" value="0.00" /> <span class="field-validation-valid" data-valmsg-for="Longitude" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="URL">website</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-regex="Not a valid website address." data-val-regex-pattern="^http(s?)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$" id="URL" name="URL" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="URL" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="Phone">phone number</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Phone" name="Phone" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="TicketPriceLow">lowest ticket price</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field lowest ticket price must be a number." id="TicketPriceLow" name="TicketPriceLow" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="TicketPriceLow" data-valmsg-replace="false">*</span>
</div>
<div class="editor-label">
<label for="TicketPriceHigh">highest ticket price</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field highest ticket price must be a number." id="TicketPriceHigh" name="TicketPriceHigh" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="TicketPriceHigh" data-valmsg-replace="false">*</span>
</div>
<div class="editor-field">
<input data-val="true" data-val-required="The date posted field is required." id="DatePosted" name="DatePosted" type="hidden" value="11/23/2010 7:13:58 AM" />
</div>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'clean',
tabindex : 0
};
</script><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LdF974SAAAAAEY2Ujhga1mvtU3wAd97Ag9VgwLZ">
</script><noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdF974SAAAAAEY2Ujhga1mvtU3wAd97Ag9VgwLZ" width="500" height="300" frameborder="0">
</iframe><br /><textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
</noscript> <p>
<input type="submit" value="Create" />
<div class="validation-summary-valid" data-valmsg-summary="true"><span>Oops!, please correct the errors...</span>
<ul><li style="display:none"></li>
</ul></div>
</p>
</fieldset>
</form><div>
</div>
</div>
<div id="footer">
<ul id="footernavigation">
<li>© 2010 - <a href="/">My App</a> - All Rights Reserved</li>
<li><span class="colorgreen increasesize-140">■</span>
<a href="/about">about</a>
| <span class="colorgreen increasesize-140">■</span>
<a href="/about/faq">faq</a>
| <span class="colorgreen increasesize-140">■</span>
<a href="/about/advertise">advertise</a>
| <span class="colorgreen increasesize-140">■</span>
<a href="/about/legal">legal</a></li>
</ul>
</div>
</div>
</div>
<div id="dialog-confirm" title="Log Out">
<div class="alert" title="Alert"></div>
  Are you sure?
</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Extras/MyApp.js/1"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/jscript"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
</body>
</html>
And lastly, if you're an MVC Guru, here's my View Content
@ModelType MyApp.Core.Domain.Event
@Section TitleContent Add An Event!End Section
@Section MainTitle Add An Event!End Section
@section HeaderContent
<link href="@MvcHtmlString.Create(Url.Content("~/Assets/Css/wmd.css"))" rel="stylesheet" type="text/css" />
End Section
<h2>Add</h2>
@Using Html.BeginForm()
@<fieldset><legend>Fields</legend>
<div class="editor-field">
@Html.EditorFor(Function(model) model.UserID)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.RegionID)
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Title)
</div>
<div class="editor-field">
@Html.TextBoxFor(Function(model) model.Title, New With {.class = "full-width-input"}) @Html.ValidationMessage("Title", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Location)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.Location) @Html.ValidationMessage("Location", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Address)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.Address) @Html.ValidationMessage("Address", "*")
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.DownVotes)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.UpVotes)
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Description) @Html.ValidationMessage("Description", "*")
</div>
<div class="editor-field">
<noscript><h3>Please use @Html.ActionLink("Markdown", "Markdown", "About") to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
@Html.TextAreaFor(Function(model) model.Description, 5, 10, New With {.id = "wmd-input", .class = "wmd-panel"})
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.StartDateTime)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.StartDateTime) @Html.ValidationMessage("StartDateTime", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.EndDateTime)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.EndDateTime) @Html.ValidationMessage("EndDateTime", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Latitude)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.Latitude) @Html.ValidationMessage("Latitude", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Longitude)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.Longitude) @Html.ValidationMessage("Longitude", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.URL)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.URL) @Html.ValidationMessage("URL", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.Phone)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.Phone) @Html.ValidationMessage("Phone", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.TicketPriceLow)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.TicketPriceLow) @Html.ValidationMessage("TicketPriceLow", "*")
</div>
<div class="editor-label">
@Html.LabelFor(Function(model) model.TicketPriceHigh)
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.TicketPriceHigh) @Html.ValidationMessage("TicketPriceHigh", "*")
</div>
<div class="editor-field">
@Html.EditorFor(Function(model) model.DatePosted)
</div>
@MvcHtmlString.Create(Html.reCaptcha) <p>
<input type="submit" value="Create" /> @ViewData("isvalid")
@Html.ValidationSummary("Oops!, please correct the errors...")
</p>
</fieldset>
End Using
<div>
</div>
@Section BelowCombres
<script src="@MvcHtmlString.Create(Url.Content("~/Assets/Scripts/wmd.js"))" type="text/javascript"></script>
<script src="@MvcHtmlString.Create(Url.Content("~/Assets/Scripts/showdown.js"))" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/jscript"></script>
<script src="@MvcHtmlString.Create(Url.Content("~/Assets/Scripts/jquery.validate.unobtrusive.js"))" type="text/javascript"></script>
End Section
Found the problem
type="text/jscript"
Should be
type="text/javascript"
加载中,请稍侯......
精彩评论