twitter-bootstrap ASP.NET MVC5 textarea 未在验证错误中以红色标出

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25039888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 21:14:35  来源:igfitidea点击:

ASP.NET MVC5 textarea not outlined in red on validation error

htmlcssasp.netasp.net-mvctwitter-bootstrap

提问by Avrohom Yisroel

I am using ASP.NET MVC5 with Bootstrap, and have the following in a Razor view for a contact form...

我正在将 ASP.NET MVC5 与 Bootstrap 一起使用,并在 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>
}

If the user clicks the submit button without filling in their name or email address, the validation message is displayed correctly, and the textboxes are outlined in red.

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

However, the textarea doesn't get outlined, although the validation message is shown... enter image description here

但是,尽管显示了验证消息,但文本区域没有被勾勒出来...... 在此处输入图片说明

Here is the generated HTML...

这是生成的 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>

Anyone any idea why the textarea isn't outlined in red?

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

回答by Ben Griffiths

Presumably bootstrap doesn't include a style rule for invalid textarea elements. You could fix it by adding the following to your stylesheet:

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

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