Question

我的网站上有付款表格，上面有信用卡信息和帐单邮寄地址。信用卡部分有4个输入框。我不希望在每个消息旁边都有单独的验证消息。相反，我想在信用卡下方留下一条信息，上面写着＆＃34;请填写所有信用卡信息＆＃34;。这是在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个输入，则显示自定义验证消息

1 个答案: