I've used a solution here (which I've fiddled here) for restricting submission of a form until all required fields are filled.
The problem is when I run on my MVC3 project, as I've observed on Firebug, it stops starting at the third line of the following block. Because of it, the solution doesn't work.
var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
select: function(event, ui) { // Here.
// The following lines are not executed.
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
Can somebody tell me why my project won't run the rest of the script and what I should do to fix it? Thanks!
In my View file
@ModelType SLC.Models.RegisterModel
// downloaded with NuGet
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $("#myForm").validate();
console.log(validator);
var tabs = $("#tabs").tabs({
select: function (event, ui) {
var valid = false;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
$(panelId).find("input").each(function () {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
return valid;
}
});
});
</script>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery-ui.css")" />
@Using Html.BeginForm("", "", Nothing, New With {.id = "myForm"})
@Html.ValidationSummary(True, "Account creation was unsuccessful. Please correct the errors and try again.")
@<div>
<div id="tabs">
<ul>
<li><a href="#tab-1">1. Information</a></li>
<li><a href="#tab-2">2. Information</a></li>
<li><a href="#tab-3">3. Confirm</a></li>
</ul>
<div id="tab-1">
// Some fields...
</div>
<div id="tab-2">
// Some fields...
</div>
<div id="tab-3">
// Some fields...
<input type="submit" value="Register" />
</div>
</div>
</div>
End Using
In my Layout template file
<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
// downloaded with NuGet
<script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.0.js")" type="text/javascript"></script>
</head>
I found this:
The jQuery UI select method, in particular, is deprecated as of 1.10.0, so it's either back to UI 1.9.2 or a code rewrite.