Question

我正在使用带Razor的MVC3。对于输入，我有两种类型的控制：

@Html.TextBoxFor
@Html.TextAreaFor

两者都需要进行现场验证。如果验证失败，则@Html.TextAreaFor会突出显示该框，而@Html.TextBoxFor则不会。

这是我的代码

HTML：

@Html.TextBoxFor(m => m.FirstName)

型号：

[Required(ErrorMessage = "First Name is required")]
public string FirstName { get; set; }

为什么使用@Html.TextBoxFor创建的文本框在验证失败时不会突然显示？

Answer 1

确保您在模型类中为这些输入字段分配的变量是[必需]。您是否也在“清理”过程中删除了任何css？如果它不在那里，请尝试添加它。

.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid
{
display: none;
}

Answer 2

我自己有这个问题。我在Site.css文件（或您喜欢的任何样式表）中添加了一个新的CSS类。

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

Answer 3

我今天遇到了同样的问题：

为了提高文本框或任何其他字段的验证，您只需要这两行：

在控制器中：ModelState.AddModelError("ErrorEmail", "Error Message");

在视图中：@Html.ValidationMessage("ErrorEmail")

并在web.config中

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

用我自己的网站css覆盖验证css，这就是为什么它没有在文本框周围显示红色边框。

使验证错误样式重要解决了我的问题：

input.input-validation-error {
    border: 1px solid #e80c4d !important;
}

Answer 4

添加.input-validation-error和.input.input-validation-error类。

Answer 5

我知道这是旧的，但是如果有其他人在搜索这个，请确保您也使用

@Html.ValidationMessageFor(m => m.FirstName)

在您的文本框

之后

Answer 6

为了进行客户端验证，您需要确保在View中包含必要的脚本（无论是通过_Layout.cshtml视图还是直接视图）。把它放在视图的顶部：

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

确保路径和脚本名称正确无误。这将使您能够利用客户端验证（即突出显示文本框）。

验证失败后，@ Html.TextBoxFor文本框不会突出显示

6 个答案: