Foolproof RequiredIfTrue not working for MVC5?

Question

I am trying conditional required field. If user selects ContactByPhone checkbox I am showing ContactPhoneNumber field and it should be required filed. If user doesn't select ContactByPhone then ContactPhoneNumber is invisible and not required.

Validation is not showing on client side. and after I submit the form ModelState.IsValid is false for this property.

How to handle this? I think I referenced all scripts on the page. Do we have any alternative solution for this situation?

Model

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>

Controller

Generated 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

I guess you're missing MvcFoolproofJQueryValidation.min.js and MvcFoolproofValidation.min.js JS files. See example below:

@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>
}

Note: I used jquery to control the hidden div element.