我使用 VS 2013 创建了一个新的 asp.net mvc-5 Web 应用程序。现在,当我尝试使用内置登录表单并将必填字段留空时,我得到以下内容:-

在此处输入图片说明

其中两个字段都没有用红色突出显示,因为我用来进入以前版本的 asp.net mvc。 现在从生成的标记中,我可以检查任何有验证错误的字段都将具有以下类:-

input-validation-error

但是我主要搜索在我的 asp.net mvc-5 web 应用程序中自动生成的整个 css 文件; site.css , bootstrap.css bootstrap.min.css ,但我找不到输入验证错误的定义?? 所以任何人都可以就此提出建议,如果出现验证错误,我如何用红色突出显示字段,以及为什么这不是 asp.net mvc-5 中的默认行为?

#1楼 票数:14

为什么这不是 asp.net mvc-5 中的默认行为

这不是 ASP.NET MVC 5 的默认行为。您只需要在 Site.css 文件中添加以下 css 类。

.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

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

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

#2楼 票数:1

对于那些使用Bootstrap 的人,您需要将 CSS 从 Bootstrap 的验证 CSS 复制到等效的 .NET/jquery 类。

引导式输入的示例

从 Bootstrap 4.5 开始,它看起来像这样:

复制自.was-validated .form-control:invalid, .form-control.is-invalid

.form-control.input-validation-error {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

复制自.was-validated .form-control:valid, .form-control.is-valid

.form-control.valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

  ask by john Gu translate from so

未解决问题?本站智能推荐:

2回复

从 Asp.net 中的数据库设置 css 颜色 [关闭]

关闭。 这个问题需要细节或清晰。 它目前不接受答案。 想改
1回复

Asp.Net MVC 5 + Bootstrap。 如何使输入适合屏幕宽度?

我真的不知道我在做什么错。 我希望我的文本框具有与下面的按钮相同的大小。 我已经尝试过在cshtml中进行很多更改,但是没有成功。 在我的cshtml文件下面: 我究竟做错了什么?
1回复

如何使用MVC方法在图像上显示文本

我是mvc5的新手,在这种情况下,我必须在图像上显示Label(不在里面,如果可能的话,请告诉我这样做的方式)。 我的标签包含一个文本,我想在该图像上显示该文本。 请参阅以下内容(我的尝试): 是的,当然,它将在文本下方显示图像(我的意思是DateTime.Now.Day),就像
1回复

创建有时带有侧边栏的MVC布局,有时不关闭[关闭]

在我的asp.net MVC应用程序中,我有两种类型的页面。 一个带有侧栏,一个没有侧栏。 我只想使用一个_Layout来实现。 有人可以给我建议如何使用mvc模板系统执行此操作。 因此,在某些情况下,我希望主要内容跨越所有12列,而在其他情况下,我希望将2列侧边栏和主要内容跨越10
2回复

向 ASP.Net MVC 5 添加新主题不起作用

我有以下问题。 当我尝试向 ASP.Net MVC 5 添加新主题时,我的导航栏崩溃了。 当我使用标准引导程序时,它可以工作。 我不知道为什么它不起作用。 这是我的 BundleConfig: 这是标准 MVC _Layout.cshtml 页面: 这是我使用普通 Bootstrap 时的
1回复

Bootstrap形式的水平对齐错误

我的文本框根本无法与表单正确对齐。 我在ASP.NET MVC 4中使用Bootstrap。如您所见,我使用的是水平窗体div,但是不确定我的元素为什么全部出现在外。 如何获得与标签对齐的元素?
1回复

引导程序图标显示不正常

我有MVC5应用程序,我使用下面的按钮从引导程序显示图标。问题是该图标的显示不正确(我测试的所有图标都存在相同的问题..),我看到的只是矩形而不是图标垃圾桶, 我已经在不同的项目中使用了它,并且效果很好 ,在contnet文件夹中,我有bootstrap.css和bootstrap.min.css。
1回复

将HTML-5模板转换为MVC-5应用程序:项目结构

我主要从事业务层/ DAl层的工作,并且是Nuget的忠实粉丝。 很抱歉,这听起来很明显。 我的公司购买了一个新的HTML-5模板。 我将其转换为MVC-5应用程序。 该模板使用当今流行的JavaScript / CSS库(例如Bootstrap / Modernizr等),而不是依