jquery中万无一失的RequiredIfTrue不适用于MVC5

我正在尝试条件必填字段。如果用户选择 ContactByPhone 复选框，我将显示 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; } 
 
} 

索引.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> 

Controller

生成的 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> 

请您参考如下方法:

我猜您缺少 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元素。