RequiredIf Not Firing 客户端验证样式

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

在线检查此代码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 不显眼的支持

<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 class。如果存在 class 且未显示红色边框，则添加样式：

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

Answer 2

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

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

或如果你想特定于那个下拉菜单，你可以做一个简单的技巧来喜欢这样：首先创建一个class like 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

之间有一个 space

现在是您的控制器，如果模型状态无效，请检查下拉值是否为空，如果是，则像这样设置@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";
}

然后 return 到视图，下拉菜单现在有一个红色边框

RequiredIf Not Firing 客户端验证样式

RequiredIf Not Firing Client Side Validation Styling

css

validation

asp.net-mvc

foolproof-validation

asp.net-mvc-5