Question

在我的模型中，我有这个：

[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类Test_Type的红色轮廓中的input-validation-error下拉列表。如何以表格无效的方式使用RequiredIf注释，它会突出显示input-validation-error类名称的字段？

在线检查此代码Codepen.io

Answer 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 Unobtrusive支持

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

Answer 2

有两种方法可以做到这一点，如果在验证中发生错误，它将具有类 input-validation-error 。所以你可以像这样对这个类进行设计：

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

或如果你想特定于该下拉列表，你可以做一个简单的技巧：首先创建一个类红色边框

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

然后在您的下拉列表中添加 @ ViewBag.Test_Type_Border 等视图包数据，如下所示：

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

然后返回视图，下拉列表现在有一个红色边框

必需如果不触发客户端验证样式

2 个答案: