验证错误时 ASP.NET MVC5 textarea 未以红色标出

Posted

技术标签:

【中文标题】验证错误时 ASP.NET MVC5 textarea 未以红色标出【英文标题】:ASP.NET MVC5 textarea not outlined in red on validation error 【发布时间】:2014-09-22 06:37:17 【问题描述】:

我正在使用带有 Bootstrap 的 ASP.NET MVC5,并在 Razor 视图中为联系表单提供以下内容...

@using (html.BeginForm("Contact", "Home", FormMethod.Post, new role = "form")) 
<div class="form-group">
@Html.LabelFor(model => model.theirname)
@Html.TextBoxFor(model => model.theirname, new @class = "form-control", placeholder = "Enter your name")
<div>@Html.ValidationMessageFor(model => model.theirname, "You must enter your name")</div>
  @Html.LabelFor(model => model.theiremail)
  @Html.TextBoxFor(model => model.theiremail, new @class = "form-control", placeholder = "Enter your email")
  <div>@Html.ValidationMessageFor(model => model.theiremail, "You must enter your email address")</div>
  @Html.LabelFor(model => model.message)
  @Html.TextAreaFor(model => model.message, new @class = "form-control", placeholder = "Enter message", cols = 40, rows = 5)
  <div>@Html.ValidationMessageFor(model => model.message, "You must enter a message")</div>
  <input type="checkbox" id="copytome" name="copytome" checked="@Model.copytome" /> <label for="copytome">Send me a copy of the message</label>
  <div><input type="submit" value="Send" class="btn btn-default" /></div>
</div>

如果用户在没有填写姓名或电子邮件地址的情况下单击提交按钮,则验证消息将正确显示,并且文本框以红色框出。

但是,虽然显示了验证消息,但 textarea 并没有得到概述...

这是生成的 HTML...

<form action="/Home/Contact" method="post" role="form">
<div class="form-group">
<label for="theirname">Your name</label>
<input class="input-validation-error form-control" data-val="true" data-val-required="The Your name field is required." id="theirname" name="theirname" placeholder="Enter your name" type="text" value="" />
<div><span class="field-validation-error" data-valmsg-for="theirname" data-valmsg-replace="false">You must enter your name</span></div>
<label for="theiremail">Your email</label>
<input class="input-validation-error form-control" data-val="true" data-val-required="The Your email field is required." id="theiremail" name="theiremail" placeholder="Enter your email" type="text" value="" />
<div><span class="field-validation-error" data-valmsg-for="theiremail" data-valmsg-replace="false">You must enter your email address</span></div>
<label for="message">Message</label>
<textarea class="input-validation-error form-control" cols="40" data-val="true" data-val-required="The Message field is required." id="message" name="message" placeholder="Enter message" rows="5">
</textarea>
<div><span class="field-validation-error" data-valmsg-for="message" data-valmsg-replace="false">You must enter a message</span></div>
<input type="checkbox" id="copytome" name="copytome" /> <label for="copytome">Send me a copy of the message</label>
<div><input type="submit" value="Send" class="btn btn-default" /></div>
</div>
</form>

有人知道为什么 textarea 没有用红色勾勒出来吗?

【问题讨论】:

【参考方案1】:

大概 bootstrap 不包含无效 textarea 元素的样式规则。您可以通过在样式表中添加以下内容来修复它:

 textarea.input-validation-error 
      border-color: red;
 

【讨论】:

呃,愚蠢的我!我只是假设,由于 Bootstrap 包含其他元素的 CSS,它会为此包含它,并且一定有更深层次的事情发生。原来它只是失踪了!谢谢 对于这个假设,我认为你一点也不傻。我发现在很多情况下,MVC 或 Bootstrap 团队都错过了这样的基本内容。 here 是另一个很酷的工作选项,希望对某人有所帮助。 确保您使用 CTRL-F5 以确保更改不会因为缓存而被拾取,具体取决于您使用的浏览器,或者检查直接通过生成的 CSS 文件的版本浏览器以确保这些样式确实存在。

以上是关于验证错误时 ASP.NET MVC5 textarea 未以红色标出的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET MVC5 OWIN Facebook 身份验证突然不起作用

ASP.NET MVC5 Bootstrap 3 模态表单未验证客户端并回发到页面

ASP.NET MVC5 自定义身份验证

将 ASP.NET MVC5 身份验证添加到现有项目

客户端验证在带有 Bootstrap 的 ASP.NET MVC5 中不起作用

ASP.NET MVC5 在用户注册时自动填充第二个表