0
조언이 필요합니다! 나는 asp.net mvc 면도기 페이지에 주소, 마지막 4 ssn, 국가, 주 등 은행 세부 정보를 확인하는 데 필요한 은행 계좌 정보 및 기타 정보를 제출하기위한 큰 양식이있는 곳이 있습니다. 3 개의 div ('billingContainer', 'addressContainer', 'accountContainer')와 함께 각 div에 관련 필드가 포함 된 다음 각 컨테이너의 맨 아래에 '다음'및 '뒤로'버튼이 있습니다. 그런 다음 javascript/jquery에서 해당 필드가 각 컨테이너에서 유효한지 확인하십시오. 예를 들어 주소 필드가 유효하다면 '다음'버튼을 사용하여 'accountContainer'를 표시하거나 표시 할 수 있습니다. 그런 다음 모든 필드가 선택되고 유효 할 때 유효합니다. 그래서 사용자에게 그것은 각 페이지의 필드가 모두 유효한 경우에만 통과되는 2-3 페이지가있는 것처럼 보입니다! 이것이 최선의 방법인가요? 아니면 각기 다른 컨테이너에 대한 양식을 작성하고 각 양식을 사용하여 전체 게시물을 작성해야합니다. 그 과정에서 뷰 모델에 데이터를 저장합니까?asp.net mvc 면도기 페이지에서 jquery의 특정 양식 필드 유효성 검사
Quetion - 'addressContainer'와 같이 하나의 컨테이너에서 모든 필드의 유효성을 검사 할 수 있도록 다음 버튼을 활성화하고 'accountContainer'양식의 다음 부분을 표시 할 수 있습니까? 그런 다음 사용자가 한 필드에서 텍스트를 제거하고 무효화하면 다음 버튼을 비활성화하여 다음 컨테이너로 이동할 수 없게됩니까? 여기
는 면도기 코드 내 HTML이며, 각 섹션을 보여주는 것은 내가 보여$(".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>
컨트롤 그룹의 유효성을 검사하려면 [이 답변] (https://stackoverflow.com/questions/25643394/mvc-force-jquery-validation-on-group-of-elements/25645097#25645097)을 참조하십시오. –