在asp.net mvc剃须刀页面验证jQuery中的特定表单字段
问题描述：
我需要建议！我有一个asp.net mvc剃须刀页面，我有一个大型表格提交银行帐户详细信息和其他信息，需要验证银行的详细信息，如地址，最后4 ssn，国家，州等，我认为我可以创建一个大型（'billingContainer'，'addressContainer'，'accountContainer'），其中每个div包含相关字段，然后在每个容器底部有一个“下一个”和“后退”按钮。然后在javascript/jquery中检查这些特定字段在每个容器中是否有效。如果说例如地址字段是有效的，那么我将启用“下一个”按钮来显示/显示'accountContainer'，然后当所有这些字段被检查并且有效时，我可以提交。因此，对于用户来说，只有当每个页面上的字段全部有效时，才有2-3个页面被遍历！这是最好的方法，还是应该为每个不同的容器创建表单，并且每个表单都保存视图模型中的数据？在asp.net mvc剃须刀页面验证jQuery中的特定表单字段
Quetion - 我如何检查只有一个容器中的所有字段的验证 - 比如说'addressContainer'，然后我可以启用下一个按钮并显示'accountContainer'表单的下一部分？然后，如果用户从一个字段中删除文本并使其无效，我将禁用下一个按钮，以便他/她无法移动到下一个容器？
这里是我的html剃刀代码，显示每个部分周围有一个div容器名称，我将显示和隐藏
$(".showAddressContainerBtn").off('click').on('click', function() {
$("#billingContainer").hide();
$("#addressContainer").show();
$("#Country1").prop('disabled', true);
$(".showBillingContainerBtn").off('click').on('click', function() {
$("#billingContainer").show();
$("#addressContainer").hide();
});
$(".showAccountContainerBtn").off('click').on('click', function() {
$("#addressContainer").hide();
$("#accountContainer").show();
$(".showAddressContainerFromAccountBtn").off('click').on('click', function() {
$("#addressContainer").show();
$("#accountContainer").hide();
});
});
});<form id="bankForm">
<div id="billingContainer">
<div class="row">
<h2>Billing Country</h2>
</div>
<div class="row">
@Html.DropDownListFor(m => m.SelectedCountryId, new SelectList(Model.CountryList, "Value", "Text"), new { @id = "Country", @class = "btn-group-lg countryList form-control selectpicker" })
</div>
<div class="row">
<h2>Payout methods in United States</h2>
</div>
<div class="row">
<div class="col-sm-1">
@Html.RadioButtonFor(m => m.TransferType, "bankaccount", new { id = "BankAccount", data_label = "" })
</div>
<div class="col-sm-11">
<div>Bank transfer in USD ($)</div>
<div>Get paid in 5-7 business days</div>
</div>
</div>
<div class="row">
<hr />
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-lg btn-link" href="/User/Payout" style="border: 1px solid #286090"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> back</a>
<button class="btn btn-lg btn-primary pull-right showAddressContainerBtn">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div id="addressContainer" style="display: none">
<div class="row">
<h3>What's the address for this payout method?</h3>
</div>
<div class="row">
<div class="form-group">
<label for="AddressLine1">Street address</label> @Html.TextBoxFor(m => m.StreetAddressLine1, new { @id = "AddressLine1", @class = "form-control input-lg", placeholder = "e.g. 123 Main St." }) @Html.ValidationMessageFor(m => m.StreetAddressLine1,
"", new { @class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group">
<label for="AddressLine2">Apt, suite, bldg. (optional)</label> @Html.TextBoxFor(m => m.StreetAddressLine2, new { @id = "AddressLine2", @class = "form-control input-lg", placeholder = "e.g. Apt #6" }) @Html.ValidationMessageFor(m => m.StreetAddressLine2,
"", new { @class = "text-danger" })
</div>
</div>
<div class="row">
<div class="col-sm-6" style="padding-left: 0px; padding-right: 5px;">
<div class="form-group">
<label for="City">City</label> @Html.TextBoxFor(m => m.City, new { @id = "City", @class = "form-control input-lg" }) @Html.ValidationMessageFor(m => m.City, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-sm-6" style="padding-left: 5px; padding-right: 0px;">
<div class="form-group">
<label for="State">State/Province</label> @Html.DropDownListFor(m => m.StateCode, new SelectList(Model.StateList, "Value", "Text"), "", new { @id = "State", @class = "btn-group-lg countryList form-control selectpicker" }) @Html.ValidationMessageFor(m
=> m.StateCode, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="PostalCode">Zip code/Postal code</label> @Html.TextBoxFor(m => m.PostalCode, new { @id = "PostalCode", @class = "form-control input-lg", placeholder = "e.g. 94102" }) @Html.ValidationMessageFor(m => m.PostalCode, "", new { @class
= "text-danger" })
</div>
</div>
<div class="row">
@Html.DropDownListFor(m => m.SelectedCountryId, new SelectList(Model.CountryList, "Value", "Text"), new { @id = "Country1", @class = "btn-group-lg countryList form-control selectpicker" })
</div>
<div class="row">
<hr />
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-lg btn-link showBillingContainerBtn" style="border: 1px solid #286090"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> back</a>
<button class="btn btn-lg btn-primary pull-right showAccountContainerBtn">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div id="accountContainer" style="display: none;">
<div class="row">
<h2>Add bank account info</h2>
</div>
<div class="row">
<div class="form-group">
<label for="LastFour">Last 4 SSN</label> @Html.TextBoxFor(m => m.LastFour, new { @id = "LastFour", @class = "form-control input-lg", placeholder = "e.g. 4530" }) @Html.ValidationMessageFor(m => m.LastFour, "", new { @class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group">
<label for="AccountName">Account holder name</label> @Html.TextBoxFor(m => m.AccountName, new { @id = "AccountName", @class = "form-control input-lg", placeholder = "e.g. First Last" }) @Html.ValidationMessageFor(m => m.AccountName, "", new {
@class = "text-danger" })
</div>
</div>
<div class="row">
<div class="form-group">
<label for="Routing">Routing number</label> @Html.TextBoxFor(m => m.Routing, new { @id = "Routing", @class = "form-control input-lg", placeholder = "e.g. 123456789" }) @Html.ValidationMessageFor(m => m.Routing, "", new { @class = "text-danger"
})
</div>
</div>
<div class="row">
<div class="form-group">
<label for="Account">Account number</label> @Html.TextBoxFor(m => m.Account, new { @id = "Account", @class = "form-control input-lg", placeholder = "e.g. 1234567890" }) @Html.ValidationMessageFor(m => m.Account, "", new { @class = "text-danger"
})
</div>
</div>
<div class="row">
<div class="form-group">
<label for="ConfirmAccount">Confirm account number</label> @Html.TextBoxFor(m => m.ConfirmAccount, new { @id = "ConfirmAccount", @class = "form-control input-lg", placeholder = "e.g. 1234567890" }) @Html.ValidationMessageFor(m => m.ConfirmAccount,
"", new { @class = "text-danger" })
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-lg btn-link showAddressContainerFromAccountBtn" style="border: 1px solid #286090"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> back</a>
<button class="btn btn-lg btn-primary pull-right addAccountBtn">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></button>
</div>
</div>
</div>
</form>
答
我怎么能检查确认为只有一个容器中的所有字段 - 比如'addressContainer'，所以我可以启用下一个按钮并显示'accountContainer'表单的下一部分？
解决方案：我建议您逐步对每个字段执行内联验证，然后如果用户验证所有字段，则允许他执行某些操作或将其发回服务器。有关详细信息，请查看该链接Click here for inline validation plugin
also you can get some help from here
然后，如果用户从一个字段删除文字和无效的话，我会禁用下一个按钮，这样他/她不能移动到下一个容器？
解决方案：您可以使用onTextChange函数那样的东西，作为整体，您的案例中的完整解决方案将进行内联验证。
验证控件组，请参考[本答案]（https://stackoverflow.com/questions/25643394/mvc-force-jquery-validation-on-group-of-elements/25645097#25645097） –