在 asp.net mvc razor 页面中验证 jquery 中的特定表单字段

Posted

技术标签:

【中文标题】在 asp.net mvc razor 页面中验证 jquery 中的特定表单字段【英文标题】:validating specific form fields in jquery in a asp.net mvc razor page 【发布时间】:2018-04-02 00:17:44 【问题描述】:

我需要建议!我有一个 asp.net mvc razor 页面,我有一个大表格,用于提交银行帐户详细信息和验证银行详细信息所需的其他信息,如地址、最后 4 个 ssn、国家、州等。我想我可以创建一个大的具有 3 个 div('billingContainer'、'addressContainer'、'accountContainer')的表单,其中每个 div 包含相关字段,然后在每个容器的底部都有一个“下一步”和“后退”按钮。然后在 javascript/jquery 中检查这些特定字段在每个容器中是否有效。例如,如果地址字段有效,那么我将启用“下一步”按钮以显示/显示“accountContainer”,然后当所有这些字段都被选中并且有效时,我可以提交。所以对用户来说,只有当每个页面上的字段都有效时,才会遍历 2-3 个页面!这是最好的方法,还是我应该为每个不同的容器创建表单,并在每个表单的过程中将数据保存在视图模型中做一个完整的帖子?

问题 - 我如何检查一个容器中所有字段的验证 - 比如“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>

【问题讨论】:

要验证控件组,请参阅this answer 【参考方案1】:

如何检查一个容器中所有字段的验证——比如“addressContainer”,然后我可以启用下一个按钮并显示“accountContainer”表单的下一部分?

解决方案:我建议您逐步对每个字段执行内联验证,然后如果用户验证所有字段,则允许他执行某些操作或回发到服务器。有关更多信息,请查看该链接 @987654321 @

also you can get some help from here

然后,如果用户从一个字段中删除文本并使其无效,我会禁用下一个按钮,这样他/她就不能移动到下一个容器?

解决方案:您可以再次使用类似的 onTextChange 函数作为一个完整的解决方案,在您的情况下将是内联验证。

【讨论】:

以上是关于在 asp.net mvc razor 页面中验证 jquery 中的特定表单字段的主要内容,如果未能解决你的问题,请参考以下文章

[ASP.NET Core 3.1 MVC Razor页面仅在模型成员有效时显示图标

部分页面上的 ASP.NET Core 3.0 Razor JQuery 验证规则

ASP.NET Core 2,使用没有 MVC 的 Razor 页面单击按钮

Razor 页面简化了 ASP.NET MVC 应用程序

使用 ASP.NET 核心 MVC/Razor 站点和 WebAPI 进行授权

[Asp.Net Core]MVC_Razor布局