万无一失如果IfTrue对MVC5不起作用？

Question

我正在尝试有条件的必填字段。 如果用户选中“ ContactByPhone复选框，则我将显示“ ContactPhoneNumber字段，并且必须填写ContactPhoneNumber字段。 如果用户未选择ContactByPhone则ContactPhoneNumber是不可见的，并且不是必需的。

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

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

模型

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

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

}

Index.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>

Answer 1

我想您缺少MvcFoolproofJQueryValidation.min.js和MvcFoolproofValidation.min.js 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元素。