2

我正在尝试有条件的必填字段。如果用户选择ContactByPhone复选框，我将显示ContactPhoneNumber字段，并且应该要求提交。如果用户不选择，ContactByPhone则不ContactPhoneNumber可见且不需要。

验证未显示在客户端。在我提交该属性的表单后ModelState.IsValid，该属性为假。

如何处理？我想我引用了页面上的所有脚本。对于这种情况，我们有任何替代解决方案吗？

模型

public class Contact
{
  [Display(Name = "by Phone")]
  public bool ContactByPhone { get; set; }

  [RequiredIfTrue("ContactByPhone", ErrorMessage = "Phone number is required")]
  public string ContactPhoneNumber { get; set; }

}

索引.cshtml

<script src="~/Scripts/jquery.validate.min.js"></script>
   <script src="~/Scripts/jquery.mask.min.js"></script>
   <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
   <script src="~/Scripts/Index.js"></script>
   <script src="~/Scripts/jquery.notifyBar.js"></script>
   <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
   <script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
   <div class="form-group">
        <div class="col-sm-5 text-left">
           @Html.Label("How do you want to be contacted?", new { @class = "control-label" })
        </div>
        <div class="col-sm-1">
          @Html.CheckBoxFor(model => model.ContactByPhone, new { @style = "margin-top: 8px"})
        </div>
    </div>
    <div class="form-group" id="divContactPhone" hidden>
        <div class="col-sm-5">
           @Html.LabelFor(model => model.ContactPhoneNumber, new { @class = "control-label-nobold" })<span class="red">*</span>
         </div>
         <div class="col-sm-4">
            @Html.TextBoxFor(m => m.ContactPhoneNumber, new { @class = "form-control" }) 
            @Html.ValidationMessageFor(m => m.ContactPhoneNumber, "", new { @style = "color:Red" })
          </div>
    </div>

控制器

在此处输入图像描述

生成的 HTML

<div class="col-sm-4">
     <input class="form-control valid" data-val="true" data-val-requiredif="Phone number is required" data-val-requiredif-dependentproperty="ContactByPhone" data-val-requiredif-dependentvalue="True" data-val-requiredif-operator="EqualTo" id="ContactPhoneNumber" name="ContactPhoneNumber" type="text" value="" maxlength="15" autocomplete="off"> 
     <span class="field-validation-valid" data-valmsg-for="ContactPhoneNumber" data-valmsg-replace="true" style="color:Red"></span>
</div>
4

1 回答 1

2

我猜你丢失了MvcFoolproofJQueryValidation.min.jsJSMvcFoolproofValidation.min.js文件。请参见下面的示例：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        @Html.ValidationSummary(true)

        <div class="form-group">
            <div class="col-sm-5 text-left">
                @Html.Label("How do you want to be contacted?", new { @class = "control-label" })
            </div>
            <div class="col-sm-1">
                @Html.CheckBoxFor(model => model.ContactByPhone, new { @id = "myCheckBox", @style = "margin-top: 8px" })
                @Html.ValidationMessageFor(model => model.ContactByPhone)
            </div>
        </div>
        <div class="form-group" id="divContactPhone">
            <div class="col-sm-5">
                @Html.LabelFor(model => model.ContactPhoneNumber, new { @class = "control-label-nobold" })<span class="red">*</span>
            </div>
            <div class="col-sm-4">
                @Html.TextBoxFor(m => m.ContactPhoneNumber, new { @class = "form-control" })
                @Html.ValidationMessageFor(m => m.ContactPhoneNumber, "", new { @style = "color:Red" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-5 text-left">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
    <script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
    <script src="~/Scripts/MvcFoolproofValidation.min.js"></script>
    <script>
        $("#divContactPhone").hide();
        $("input[type=checkbox]").on("click", function () {
            $("#divContactPhone").toggle('show');
        });
    </script>
}

注意：我使用 jquery 来控制隐藏的 div 元素。

于 2013-12-24T19:11:33.380 回答