【发布时间】：2015-10-29 10:06:44
【问题描述】：
我在使用 jquery validate 插件时遇到了一些问题，我正在为汽车经销商编写一个项目来预订无线电维修，并且需要通过 AJAX 表单将信息发送到我的服务器，目前该表单根本无法验证出于某种原因。
这令人费解，因为我在另一个表单上使用完全相同类型的代码，效果很好！
谁能指出我正确的方向？
代码如下
查看
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
<!-- Bootstrap Core JavaScript -->
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryunobtrusive")
<!-- Metis Menu Plugin JavaScript -->
<script src="@Url.Content("~/Content/lib/metisMenu/dist/metisMenu.min.js")"></script>
<!-- Custom Theme JavaScript -->
<script src="@Url.Content("~/Content/js/sb-admin-2.js")"></script>
<script src="@Url.Content("~/Content/lib/bootstap-wizard/jquery.bootstrap.wizard.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script src=@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")></script>
<script src=@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")></script>
<!-- Custom CSS -->
<link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet">
<!-- Custom Fonts -->
<link href="@Url.Content("~/Content/lib/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css">
<!-- Custom Fonts -->
<link href="@Url.Content("~/Content/awesome-bootstrap-checkbox.css")" rel="stylesheet" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@using (Ajax.BeginForm("BookRepair", "Dealer", null, new AjaxOptions
{
HttpMethod = "POST",
OnSuccess = "Success",
OnFailure = "Failure",
UpdateTargetId = "SuccessText",
InsertionMode = InsertionMode.Replace
}, new { @class = "form-horizontal" }))
{
@Html.ValidationSummary(true, "", new { @class="text-danger"})
<div class="container-fluid" id="PageContainer">
<div id="rootwizard">
<ul>
<li><a href="#tab1" data-toggle="tab">Exchange Details</a></li>
<li><a href="#tab2" data-toggle="tab">Vehicle Details</a></li>
<li><a href="#tab3" data-toggle="tab">Defect Details</a></li>
<li><a href="#tab4" data-toggle="tab" id="AddInfo">Trapped Items</a></li>
<li><a href="#tab5" data-toggle="tab">Terms and Conditions</a></li>
</ul>
<br />
<div class="col-md-6">
<div class="panel panel-default">
<div class="container-fluid">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane" id="tab1">
<h1>Radio or Cluster?</h1>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" id="IsRadio">
@Html.RadioButtonFor(m => m.IsRadioRepair, new { @type = "radio", @value="True", @class = "btn btn-primary" }) Radio
@Html.ValidationMessageFor(m => m.IsRadioRepair, "", new { @class = "text-danger" })
</label>
<label class="btn btn-default" id="IsCluster">
<input type="radio" value="False" class="btn btn-primary"> Cluster
</label>
</div>
<div class="Requesttype">
<h4>Type of Request</h4>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" id="IsAdvanceRepair">
@Html.RadioButtonFor(m => m.IsDirectRepair, new { @type = "radio", @value = "false", @class = "btn btn-primary" }) Advance Repair
@Html.ValidationMessageFor(m => m.IsDirectRepair, "", new { @class = "text-danger" })
</label>
<label class="btn btn-default" id="RepairBtn">
<input type="radio" value="True" class="btn btn-primary"> Direct Repair
</label>
</div>
</div>
<div id="warranty-container-Adv">
<h4>Unit is in Warranty?</h4>
@Html.RadioButtonFor(m => m.WarrantyTypeOptions, "PDI Warranty", new { @value = "PDI" }) PDI Warranty
@Html.RadioButtonFor(m => m.WarrantyTypeOptions, "non PDI Warranty", new { @value = "NoPDI" }) non PDI Warranty
@Html.RadioButtonFor(m => m.WarrantyTypeOptions, "Not in Warranty", new { @value = "NoWarranty" }) Not In Warranty
@Html.ValidationMessageFor(m => m.WarrantyTypeOptions, "", new { @class = "text-danger" })
</div>
<div id="warranty-container-Dir">
<h4>Unit is in Warranty?</h4>
@Html.RadioButtonFor(m => m.WarrantyTypeOptions, "In Warranty", new { @value = "ClusterHasWarranty" }) In Warranty
@Html.RadioButtonFor(m => m.WarrantyTypeOptions, "Not in Warranty", new { @value = "ClusterNoWarranty" }) Not In Warranty
@Html.ValidationMessageFor(m => m.WarrantyTypeOptions, "", new { @class = "text-danger" })
</div>
<div class="col-md-12">
<ul class="pager wizard">
<li class="next"><a href="#tab2">Next</a></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="form-group">
<h4>Vehicle Sale Date</h4>
@Html.TextBoxFor(m => m.VehicleSaleDate, new { @class = "form-control datepicker", @placeholder = "Please select..." })
@Html.ValidationMessageFor(m => m.VehicleSaleDate, "", new { @class = "text-danger" })
<h4>Claim Number</h4>
@Html.TextBoxFor(m => m.ClaimNumber, new { @class = "form-control", @placeholder = "E.G 12ER34" })
@Html.ValidationMessageFor(m => m.ClaimNumber, "", new { @class = "text-danger" })
<h4>VIN Number</h4>
@Html.TextBoxFor(m => m.VIN, new { @class = "form-control", @placeholder = "Please enter VIN number" })
@Html.ValidationMessageFor(m => m.VIN, "", new { @class = "text-danger" })
<h4>Vehicle Registration Number</h4>
@Html.TextBoxFor(m => m.VehicleRegNo, new { @class = "form-control", @placeholder = "Please enter Car Registration number" })
<h4>Miles/KM</h4>
@Html.TextBoxFor(m => m.Mileage, new { @class = "form-control", @placeholder = "Please enter Mileage in KM or Miles" })
<ul class="pager wizard">
<li class="previous"><a href="#tab1">Previous</a></li>
<li class="next"><a href="#tab3">Next</a></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab3">
<div class="form-group">
<h4>Part Number</h4>
@Html.TextBoxFor(m => m.PartNumber, new { @class = "form-control", @placeholder = "Please enter Part Number" })
@Html.ValidationMessageFor(m => m.PartNumber, "", new { @class = "text-danger" })
<button class="btn btn-success" title="" data-placement="bottom" data-toggle="tooltip" type="button" data-original-title="You can find the part number on the label" style="float: right">Where?</button>
</div>
<div class="form-group">
<h4>Bezel Colour</h4>
@Html.TextBoxFor(m => m.BezelColor, new { @class = "form-control", @placeholder = "Please enter Bezel Color" })
<br />
<h4>Type</h4>
@Html.TextBoxFor(m => m.Type, new { @class = "form-control", @placeholder = "Type" })
<br />
<h4>Serial Number</h4>
@Html.TextBoxFor(m => m.Serial, new { @class = "form-control", @placeholder = "Serial Number" })
<br />
<h4>Labour hours</h4>
@Html.TextBoxFor(m => m.LabourHours, new { @class = "form-control", @placeholder = "Labour hours" })
<br />
<h4>Defect Description</h4>
@Html.TextBoxFor(m => m.DefectDesc, new { @class = "form-control", @placeholder = "E.G Poor display, Customer Damage, Navigation issues, etc" })
<br />
<h4>Status of the Defect</h4>
@Html.TextBoxFor(m => m.Condition, new { @class = "form-control", @placeholder = "Inoperative, happens over time, intermittent etc" })
<br />
<h4>Reported issue(s)</h4>
@Html.TextAreaFor(m => m.CustomerComplaint, new { @class = "form-control", @style = "max-width:100%; max-height:100%;resize:none", @placeholder = "Please enter customer's complaint as Reported" })
</div>
<ul class="pager wizard">
<li class="previous"><a href="#tab1">Previous</a></li>
<li class="next"><a href="#tab3">Next</a></li>
</ul>
</div>
<div class="tab-pane" id="tab4">
<div class="form-group">
<h4 id="TrappedItemContainer0">Does the Unit have any trapped Items?</h4>
</div>
<div class="btn-group" data-toggle="buttons"id="TrappedItemContainer1">
<label class="btn btn-default" id="HasTrappedItems">
@Html.RadioButtonFor(m => m.HasTrappedItems, new { @type = "radio", @class = "btn btn-primary" }) Yes
</label>
<label class="btn btn-default" id="NoTrappedItems">
<input type="radio" value="IsAdvance" class="btn btn-primary"> No
</label>
</div>
<div id="TrappedItemContainer">
<h4>Trapped Item 1</h4>
@Html.TextBoxFor(m => m.TrappedItem1, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
<br />
<h4>Trapped Item 2</h4>
@Html.TextBoxFor(m => m.TrappedItem2, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
<br />
<h4>Trapped Item 3</h4>
@Html.TextBoxFor(m => m.TrappedItem3, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
<br />
<h4>Trapped Item 4</h4>
@Html.TextBoxFor(m => m.TrappedItem4, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
<br />
<h4>Trapped Item 5</h4>
@Html.TextBoxFor(m => m.TrappedItem5, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
<br />
<h4>Trapped Item 6</h4>
@Html.TextBoxFor(m => m.TrappedItem6, new { @class = "form-control", @placeholder = "CD/DVD Title, artist etc" })
<br />
</div>
<h4>Additional Comments</h4>
@Html.TextAreaFor(m => m.AdditionalComments, new { @class = "form-control", @style = "max-width:100%; max-height:100%;resize:none", @placeholder = "Any other Additional Information" })
<ul class="pager wizard">
<li class="previous"><a href="#tab3">Previous</a></li>
<li class="next"><a href="#tab5">Next</a></li>
</ul>
</div>
<div class="tab-pane" id="tab5">
<div class="col-md-12">
<h3>Terms + Conditions</h3>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lob ortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
<br />
<ol type="I">
<br />
<li>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
Sem nulla eu ultricies orci praesent id augue nec lorem pretium congue sit amet ac nunc fusce iaculis lorem eu diam hendrerit at mattis purus dignissim vivamus mauris tellus, fringilla.
</li>
<br />
<li>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lobortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
</li>
<br />
<li>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Placerat suscipit
</li>
<br />
<li>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.
Placerat suscipit
</li>
<br />
<li>
Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.
Fusce non varius purus aenean nec magna felis fusce vestibulum velit mollis odio sollicitudin lacinia aliquam posuere, sapien elementum lob ortis tincidunt, turpis dui ornare nisl, sollicitudin interdum turpis nunc eget.
</li>
<br />
</ol>
</div>
<div class="col-md-12" style="text-align:center;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" id="TCAgree">
<input type="radio" value="IsAccepted" class="btn btn-primary"> I agree
</label>
<label class="btn btn-default" id="TCNotAgree">
<input type="radio" value="IsRefused" class="btn btn-primary"> I do not Agree
</label>
</div>
<br />
<br />
<div id="AjaxLoader">
<button type="submit" class=" btn btn-success" style="text-align:right;" @*value="submit"*@ id="SubmitBtn"> Submit Request</button>
<ul class="pager wizard">
<li class="previous"><a href="#tab4">Previous</a></li>
</ul>
</div>
</div>
</div>
<br/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
这些是我通过 _Layout 页面加载的脚本
@Scripts.Render("~/bundles/jquery")
<!-- Bootstrap Core JavaScript -->
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryunobtrusive")
<!-- Metis Menu Plugin JavaScript -->
<script src="@Url.Content("~/Content/lib/metisMenu/dist/metisMenu.min.js")"></script>
<!-- Custom Theme JavaScript -->
<script src="@Url.Content("~/Content/js/sb-admin-2.js")"></script>
<script src="@Url.Content("~/Content/lib/bootstap-wizard/jquery.bootstrap.wizard.min.js")"></script>
@Scripts.Render("~/bundles/modernizr")
<!-- Bootstrap Core CSS -->
<link href="@Url.Content("~/Content/lib/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="@Url.Content("~/Content/lib/metisMenu/dist/metisMenu.min.css")" rel="stylesheet">
<!-- Custom CSS -->
<link href="@Url.Content("~/Content/css/main.css")" rel="stylesheet">
<!-- Custom Fonts -->
<link href="@Url.Content("~/Content/lib/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css">
@Styles.Render("~/Content/css")
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
此时我的控制器只是调用一个插入数据的网络服务，主要问题只是前端/后端验证。
【问题讨论】：
-
您到处都有多个重复的脚本。确保您只有一个，并且它们以正确的顺序加载
标签： c# jquery ajax asp.net-mvc validation