如果缺少 4 个输入中的任何一个，则显示自定义验证消息

Question

我的网站上有一张包含信用卡信息和账单地址的付款表格。信用卡部分有4个输入框。我不希望每个人旁边都有单独的验证消息。相反，我想要在信用卡下方显示一条类似 "Please fill in all the credit card information" 的消息。这是使用 MVC4 的 jquery 验证。

这是我的表格：

    <div class="creditcard form-group">
      <h2>Credit Card</h2>
      @Html.TextBoxFor(model => model.cardNumber, new { @class = "form-control", @id = "CardNum", @placeholder = "Card Number" })
      @Html.TextBoxFor(model => model.name, new { @class = "form-control cap", @id = "FullName", @placeholder = "Full Name" })
      @Html.TextBoxFor(model => model.expDate, new { @class = "form-control", @id = "CardExp", @placeholder = "MM/YY" })
      @Html.TextBoxFor(model => model.cvv, new { @class = "form-control", @id = "CardCVV", @placeholder = "CVV" })
      @Html.HiddenFor(model => model.ccType)
    </div>
    <h2>Billing Address</h2>
    <div class="form-group">
      <input type="checkbox" id="sameAddress" name="sameAddress" class="checkbox-inline" />
      <label for="sameAddress" class="check">Check if the same as Delivery Address</label>
    </div>
    <div class="form-group">
      <div class="editor-label">
        @Html.LabelFor(model => model.address, new { @class = "col-sm-7" })
      </div>
      <div class="col-sm-10">
        @Html.TextBoxFor(model => model.address, new { @class = "form-control cap" })
      </div>
      <div class="col-sm-7">
        @Html.ValidationMessageFor(model => model.address)
      </div>
    </div>
    <div class="form-group">
      <div class="editor-label">
        @Html.LabelFor(model => model.address2, new { @class = "col-sm-7" })
      </div>
      <div class="col-sm-10">
        @Html.TextBoxFor(model => model.address2, new { @class = "form-control cap" })
      </div>
      <div class="col-sm-7">
        @Html.ValidationMessageFor(model => model.address2)
      </div>
    </div>
    <div class="form-group">
      <div class="editor-label">
        @Html.LabelFor(model => model.city, new { @class = "col-sm-7" })
      </div>
      <div class="col-sm-10">
        @Html.TextBoxFor(model => model.city, new { @class = "form-control cap" })
      </div>
      <div class="col-sm-7">
        @Html.ValidationMessageFor(model => model.city)
      </div>
    </div>
    <div class="form-group">
      <div class="editor-label">
        @Html.LabelFor(model => model.state, new { @class = "col-sm-7" })
      </div>
      <div class="col-sm-10">
        @Html.DropDownListFor(model => model.state, Model.stateList, new { @class = "form-control cap" })
      </div>
      <div class="col-sm-7">
        @Html.ValidationMessageFor(model => model.state)
      </div>
    </div>
    <div class="form-group">
      <div class="editor-label">
        @Html.LabelFor(model => model.zip, new { @class = "col-sm-7" })
      </div>
      <div class="col-sm-10">
        @Html.TextBoxFor(model => model.zip, new { @class = "form-control cap" })
      </div>
      <div class="col-sm-7">
        @Html.ValidationMessageFor(model => model.zip)
      </div>
    </div>
  </fieldset>
  <div class="buttons">
    <a href="@Url.Action("Delivery", "Cart")">
      <input type="button" class="btn btn-lg btn-primary" id="back" value="Back">
    </a>
    <input type="submit" value="Next" id="submit" class="btn btn-lg btn-primary" />
  </div>

如果您需要任何其他代码，请告诉我。

Answer 1

您必须手动处理，因为没有数据注释等可以为您处理。客户端，可以使用jQuery Validation's require_from_group validation.

服务器端（您永远不应该单独依赖客户端验证），您可以在操作中执行类似以下操作：

if (string.IsNullOrWhiteSpace(model.cardNumber) || string.IsNullOrWhiteSpace(model.name) || string.IsNullOrWhiteSpace(model.expDate) || string.IsNullOrWhiteSpace(model.cvv))
{
    ModelState.AddModelError("", "Please fill out all the credit card fields.");
}

if (ModelState.IsValid)
{
    ...

这将在表单中添加一般错误，该错误将显示在您调用的位置：

@Html.ValidationSummary(true)

您还可以将 "" 参数更改为特定的字段名称，以将错误附加到该字段。例如：

ModelState.AddModelError("cardNumber", "Please fill out all the credit card fields.");

会在你调用的地方显示错误：

@Html.ValidationMessageFor(m => m.cardNumber)

如果缺少 4 个输入中的任何一个，则显示自定义验证消息

Show custom validation message if any of 4 inputs are missing

validation

jquery

asp.net-mvc-4