Jquery 使用通用按钮和验证摘要序列化和验证多个表单
我在一个视图上有两个表单-每个表单位于不同的选项卡中。我在表单外有一个按钮和一个验证摘要 我想要实现的是,当用户单击该按钮时,我希望验证这两个表单,并在公共验证摘要中显示错误。第一个表单包含一些模型级别的验证(使用数据注释)和一些使用Jquery验证插件的规则动态添加的验证。第二个表单包含使用Jquery验证插件的规则动态添加的验证。动态添加验证规则的原因是,在某些单选按钮选择上,这些验证是有条件添加和删除的 以下是chtml的部分内容:Jquery 使用通用按钮和验证摘要序列化和验证多个表单,jquery,asp.net-mvc,asp.net-mvc-3,jquery-validate,unobtrusive-validation,Jquery,Asp.net Mvc,Asp.net Mvc 3,Jquery Validate,Unobtrusive Validation,我在一个视图上有两个表单-每个表单位于不同的选项卡中。我在表单外有一个按钮和一个验证摘要 我想要实现的是,当用户单击该按钮时,我希望验证这两个表单,并在公共验证摘要中显示错误。第一个表单包含一些模型级别的验证(使用数据注释)和一些使用Jquery验证插件的规则动态添加的验证。第二个表单包含使用Jquery验证插件的规则动态添加的验证。动态添加验证规则的原因是,在某些单选按钮选择上,这些验证是有条件添加和删除的 以下是chtml的部分内容: @Html.ValidationSummary(fals
@Html.ValidationSummary(false, "Please correct the following errors:")
<div class="tabbable">
<ul id="ulTabs" class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li class="hidden"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<form id="form1" action="#">
...
</form>
</div>
<div class="tab-pane fade in active" id="tab2">
<form id="form2" action="#">
...
</form>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<button id="btnSave" type="button" class="btn btn-success">Save as a Draft</button>
</div>
<div class="span4">
<button id="btnSubmit" type="button" class="btn btn-primary">Submit</button>
</div>
</div>
为什么不使用一个表单呢?90%的用户会选择第一个选项卡上的选项,从而隐藏第二个选项卡。只有10%的时间会显示第二个选项卡,然后用户需要它。因此,需要保持第一个选项卡简短,并将相关字段的一部分移动到第二个选项卡。
$(function () {
SaveAsADraftButtonInitialization();
});
function SaveAsADraftButtonInitialization() {
$("#btnSave").click(function () {
var validator = $('#form1, #form2').validate();
validator.form();
var formSerializedData = $('#form1, #form2').serialize();
if ($("#form1, #form2").valid()) {
$.ajax({
type: "POST",
url: '@Url.Action("ActionMethodName", "ControllerName")',
data: formSerializedData,
success: function (data) {
}
});
}
return false;
});
}