RequiredIf 不触发客户端验证样式答案

【问题标题】：RequiredIf Not Firing Client Side Validation StylingRequiredIf 不触发客户端验证样式
【发布时间】：2018-02-24 20:10:04
【问题描述】：

在我的模型中我有这个：

[RequiredIf("Operation", 2)]
public string Test_Type { get; set; }

我正在使用MVC Fool Proof Validation。

在我看来：

<div class="col-md-6 form-group">
    <label class="col-md-4 control-label">Operation Type: <span class="fa fa-asterisk text-danger"></span></label>
    <div class="col-md-8">
        @Html.DropDownListFor(model => model.Operation, (IEnumerable<SelectListItem>)ViewBag.OperationChoice, "-- Select Operation --", new { @class = "form-control" })
        <br />
        @Html.ValidationMessageFor(model => model.Operation, "", new { @class = "text-danger" })
    </div>
</div>

<div class="row" id="TestType-div">
    <div class="col-md-6 form-group">
        <label class="col-md-4 control-label">Type Of Test: <span class="fa fa-asterisk text-danger"></span></label>
        <div class="col-md-8">
            @Html.DropDownListFor(model => model.Test_Type, (IEnumerable<SelectListItem>)ViewBag.Test_TypeChoice, new {@class = "form-control"})
            <br/>
            @Html.ValidationMessageFor(model => model.Test_Type, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

此验证有效，但它没有以红色轮廓突出显示带有 css 类 input-validation-error 的 Test_Type 下拉列表。如何使用RequiredIf 注释，当表单无效时，它会突出显示具有input-validation-error 类名的字段？

在线查看此代码Codepen.io

【问题讨论】：

你有input-validation-error的css样式吗？
是的，只是用红色轮廓包围元素
你能显示 razor 编译后的输出吗？ ...此外，包括用于设置错误样式的相关 css 会有所帮助。

标签： css asp.net-mvc validation asp.net-mvc-5 foolproof-validation

【解决方案1】：

要启用客户端验证，请在标准客户端验证脚本文件中包含 MvcFoolproofValidation.js：

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Scripts/MvcFoolproofValidation.js" type="text/javascript"></script>

jQuery 验证 如果您使用 jQuery 验证，请在标准客户端验证脚本文件中包含 MvcFoolproofJQueryValidation.js：

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-validate.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
<script src="../../Scripts/MvcFoolproofJQueryValidation.js" type="text/javascript"></script>

MVC 3 jQuery 不显眼的支持

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/mvcfoolproof.unobtrusive.js")" type="text/javascript"></script>

如果客户端验证仍未显示，请检查您的下拉菜单是否包含 input-validation-error 类。如果类存在且未显示红色边框，则添加样式：

.input-validation-error
{
    border: 1px solid #CD0A0A;
}

【讨论】：

【解决方案2】：

有几种方法可以做到这一点，如果在验证中发生错误，它将具有 input-validation-error 类。因此，您可以像这样设置该类的样式：

.input-validation-error{
   border-style: solid;
   border-color: #ff0000;
}

或者如果你想具体到那个下拉菜单，你可以做一个简单的技巧来喜欢这样：首先创建一个像 red-border

这样的类

.red-border {
    border-style: solid;
    border-color: #ff0000;
}

然后在您的下拉列表中添加类似 @ViewBag.Test_Type_Border 的 viewbag 数据，如下所示：

@Html.DropDownListFor(model => model.Test_Type, (IEnumerable<SelectListItem>)ViewBag.Test_TypeChoice, new {@class = "form-control " + @ViewBag.Test_Type_Border})

确保表单控件和 ViewBag 之间有空格

现在是您的控制器，如果模型状态无效，请检查下拉值是否为空，如果是，请像这样设置 @ViewBag.Test_Type_Border：

if (ModelState.IsValid){
//Your code if model state is valid
}
//if it is not valid then check if the dropdown field is empty
if (string.IsNullOrEmpty(model.Test_Type))
{
     //Set the viewbag to the class red-border
     @ViewBag.Test_Type_Border = "red-border";
}

然后返回视图，下拉菜单现在会有一个红色边框

【讨论】：