万全RequiredIfTrue不工作的MVC5？ [英] Foolproof RequiredIfTrue not working for MVC5?

查看：138 发布时间：2016/6/28 21:15:04 jquery asp.net-mvc jquery-validate asp.net-mvc-5 foolproof-validation

本文介绍了万全RequiredIfTrue不工作的MVC5？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想有条件的必填字段。如果用户选择了 ContactByPhone 复选框我显示 ContactPhoneNumber 字段，就应要求提出。如果用户不选择 ContactByPhone 然后 ContactPhoneNumber 是无形的，不是必需的。

确认没有显示在客户端。后，我提交表单 ModelState.IsValid 是这个属性假的。

如何处理呢？我觉得我所引用的页面上的所有脚本。我们有这种情况的替代解决方案？

模型

 公共类联系
{
  [显示（NAME =通过电话）]
  公共BOOL ContactByPhone {搞定;组; }  [RequiredIfTrue（ContactByPhone，是必需的电话号码的ErrorMessage =）
  公共字符串ContactPhoneNumber {搞定;组; }}

Index.cshtml

 ＆LT;脚本SRC =〜/脚本/ jquery.validate.min.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =〜/脚本/ jquery.mask.min.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =〜/脚本/ jquery.validate.unobtrusive.min.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =〜/脚本/ Index.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =〜/脚本/ jquery.notifyBar.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =〜/脚本/ jquery.unobtrusive-ajax.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =〜/脚本/ mvcfoolproof.unobtrusive.min.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT; DIV CLASS =表单组＆GT;
        ＆LT; DIV CLASS =COL-SM-5文本左＆GT;
           @ Html.Label（你想联络？怎么办？，新{@class =控制标签}）
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =COL-SM-1＆GT;
          @ Html.CheckBoxFor（型号=＆GT; model.ContactByPhone，新{@style =的margin-top：8像素}）
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =表单组ID =divContactPhone隐藏＆GT;
        ＆LT; DIV CLASS =COL-SM-5＆GT;
           @ Html.LabelFor（型号=＆GT; model.ContactPhoneNumber，新{@class =控制标签nobold}）＆LT;跨度类=红＆GT; * LT; / SPAN＆GT;
         ＆LT; / DIV＆GT;
         ＆LT; DIV CLASS =COL-SM-4＆GT;
            @ Html.TextBoxFor（M = GT; m.ContactPhoneNumber，新{@class =表格控}）
            @ Html.ValidationMessageFor（M = GT; m.ContactPhoneNumber，新{@style =颜色：红色}）
          ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

控制器

生成的HTML

 ＆LT; DIV CLASS =COL-SM-4＆GT;
     ＆LT;输入类=的形式控制有效的数据-VAL =真正的数据-VAL-requiredif =电话号码是必需的数据-VAL-requiredif-dependentproperty =ContactByPhone数据-VAL-requiredif-dependentvalue =真正的数据-VAL-requiredif运营商=EqualToID =ContactPhoneNumberNAME =ContactPhoneNumber类型=文本值=MAXLENGTH =15自动完成=关闭＆GT;
     ＆LT;跨度类=现场验证，有效的数据valmsg换=ContactPhoneNumber数据valmsg替换=真的风格=颜色：红色＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;

解决方案

我想你错过 MvcFoolproofJQueryValidation.min.js 和 MvcFoolproofValidation。 min.js JS文件。见下面的例子：

  @using（Html.BeginForm（））
{
    @ Html.AntiForgeryToken（）    ＆LT; DIV CLASS =形横＆GT;        @ Html.ValidationSummary（真）        ＆LT; DIV CLASS =表单组＆GT;
            ＆LT; DIV CLASS =COL-SM-5文本左＆GT;
                @ Html.Label（你想联络？怎么办？，新{@class =控制标签}）
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =COL-SM-1＆GT;
                @ Html.CheckBoxFor（型号=＆GT; model.ContactByPhone，新{@id =myCheckBox，@style =的margin-top：8像素}）
                @ Html.ValidationMessageFor（型号=＆GT; model.ContactByPhone）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; DIV CLASS =表单组ID =divContactPhone＆GT;
            ＆LT; DIV CLASS =COL-SM-5＆GT;
                @ Html.LabelFor（型号=＆GT; model.ContactPhoneNumber，新{@class =控制标签nobold}）＆LT;跨度类=红＆GT; * LT; / SPAN＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =COL-SM-4＆GT;
                @ Html.TextBoxFor（M = GT; m.ContactPhoneNumber，新{@class =表格控}）
                @ Html.ValidationMessageFor（M = GT; m.ContactPhoneNumber，新{@style =颜色：红色}）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;        ＆LT; DIV CLASS =表单组＆GT;
            ＆LT; DIV CLASS =COL-SM-5文本左＆GT;
                ＆LT;输入类型=提交值=创建类=BTN BTN-默认的/＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
}@section脚本{
    @ Scripts.Render（〜/包/ jqueryval）
    ＆LT;脚本SRC =〜/脚本/ mvcfoolproof.unobtrusive.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/ MvcFoolproofJQueryValidation.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =〜/脚本/ MvcFoolproofValidation.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本＆GT;
        $（＃divContactPhone），隐藏（）。
        $（输入[类型=复选框]）。在（点击，函数（）{
            $（＃divContactPhone）切换（'秀'）;
        }）;
    ＆LT; / SCRIPT＆GT;
}

请注意：我用jQuery来控制隐藏的div元素

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>

解决方案

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.

这篇关于万全RequiredIfTrue不工作的MVC5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

万全RequiredIfTrue不工作的MVC5？ [英] Foolproof RequiredIfTrue not working for MVC5?

问题描述

模型

Index.cshtml

控制器

生成的HTML

Model

Index.cshtml

Controller

Generated HTML

相关文章

ASP .NET最新文章

热门教程

热门工具

登录关闭

万全RequiredIfTrue不工作的MVC5？ [英] Foolproof RequiredIfTrue not working for MVC5?

问题描述

模型

Index.cshtml

控制器

生成的HTML

Model

Index.cshtml

Controller

Generated HTML

相关文章

ASP .NET最新文章

热门教程

热门工具

登录 关闭

登录关闭